Afterburner - Custom Background
-
-
- n_drew
- Newbie
- Posts: 6
- Thanks: 0
- I was a "victim" of the global financial crisis. Now I study to become a web developer. At least I hope so.
-
First of all, thanks for your help and your excellent templates
With the Afterburner, how can i use a background like Infuse Template
I mean, when the resolution is high (for example widescreen), what kind of background is needed to display images on both sides?
Thank you and Merry Christmas
-
-
-
- n_drew
- Newbie
- Posts: 6
- Thanks: 0
- I was a "victim" of the global financial crisis. Now I study to become a web developer. At least I hope so.
-
Maybe I found the solution. I edited the file templates/rt_afterburner_j15/css/light3.css
Should work with dark*.css.
so I changed this:.background {position:absolute;width:100%;height:130px;background:url(../images/light3.png) 0 -384px repeat-x;}
to this
The background image I used was 1600px x 955px, with central area for content large 962px.background { position:absolute;width:100%; height:955px; background: #fff url(../images/your_custom background.png) no-repeat center top; }
(note the default Afterburner width is 962px).
The remaining background is white (#fff)
I hope to be helpful and understandable ... sorry I'm Italian
-
-
-
- Ben Lee
- Elite Rocketeer
- Posts: 4193
- Thanks: 42
-
That's the way to do it!
You can change your background line to this (taken from the Infuse template actually):
background:#fff url(../images/your_custom background.png) no-repeat scroll 50% 0;
It's really the same thing just using the percentage instead of the wording. The 50% just means centered, or half way, and the 0 pretty much means top.
Only advantage to using the numerical values is if you need to line up your image once you load it up but you don't want to make a new one...or if it shows different in other browsers, you can put this line in with slightly different values for the "template_ie6.css" file for example.
-
-
-
- PeteH
- Sr. Rocketeer
- Posts: 196
- Thanks: 7
-
Hi,
I have a similar issue with this template.. except that I want a small 100x100px image to tile as the background - rather using one big image. I've tried editing the css like this:but it doesn't work? Also tried using the tag 'background-image' also, but still no luck.. am I doing this right?.background {background:url(../images/bg_main.jpg) repeat;}
Thx
-
-
-
- PeteH
- Sr. Rocketeer
- Posts: 196
- Thanks: 7
-
Thx Ben.. still not working - I'm assuming you mean I just add that line 'as is' into my css sheet ?
Wouldn't I need to leave the .background class, as that's what's being referenced elsewhere - or does your line over-ride that?
-
-
-
- Ben Lee
- Elite Rocketeer
- Posts: 4193
- Thanks: 42
-
Here's the line that is already there in the template..
.background { background:transparent url(../images/light4.png) repeat-x scroll 0 -384px; height:130px; position:absolute; width:100%; }
Here is what you want to have...
.background { background:transparent url(../images/YOUR_IMAGE.png) repeat scroll 0 0; height:130px; position:absolute; width:100%; }
Make sure your image exists there.
Can you post a link if you're still having an issue?
-
-
-
- Ben Lee
- Elite Rocketeer
- Posts: 4193
- Thanks: 42
-
After playing with how Afterburner is set up, I think we might need to try a solution like this one...
This code is from a different template, so look for similarities and not necessarily exact code.
James S! wrote:You want to edit the code so that everything was contained within a wrapper, which is a relatively simple process.
1. Open index.php
2. Find
<body id="ff-<?php echo $fontfamily; ?>" class="<?php echo $fontstyle; ?> <?php echo $headerstyle; ?> <?php echo $bodystyle; ?> iehandle">
3. Below, add
<div class="wrapper">
4. Find
</body>
5. Above add
</div>
6. Then add to template.css
body { background-color: #fe6 !important; } .wrapper { background-color: #fff; }
-
Time to create page: 0.059 seconds