Afterburner. Is it possible to "stretch" the png bg further?
-
-
- Ben Lee
- Elite Rocketeer
- Posts: 4193
- Thanks: 42
-
This may be tough because the image is a "sprite" image, so the scroll values of the gradient and other items on the page may change.
Here's the image you'd be working with and you can see that changing the gradient to be larger would change the values of the images below it.
Afterburner light3 sprite image
It can be done, but will likely be "guess check and revise" to get it how you want it.
Here's a good tutorial on how this image works in the template so you can play with the values.
w3schools.com - sprite images
It's not really something that I can give you definite code for here because it depends on what your new image is.
-
-
-
- Vidar
- Hero Rocketeer
- Posts: 413
- Thanks: 0
-
Henning wrote:
hmm isnt that just a question of editing the background-pic ...This is funny! I knew something you didn't, Henning!This image is hidden for guests.
Please log in or register to see it. - Regards,
Vidar
-
-
-
- Vidar
- Hero Rocketeer
- Posts: 413
- Thanks: 0
-
Ben Lee wrote:
This may be tough because the image is a "sprite" image, so the scroll values of the gradient and other items on the page may changeI've tinkered around and, yup, I've experienced some strange picture behaviour afterwards.
Ben Lee wrote:It's not really something that I can give you definite code for here because it depends on what your new image is.Hmm, so if I told you how I want it to look, you could give the code? That easy?
A quick mock up . The field is expanded to 280 px. - Regards,
Vidar
-
-
-
- Vidar
- Hero Rocketeer
- Posts: 413
- Thanks: 0
-
You knew I was trying to have some fun, not actually mocking you, right? I failed, because you knew. :cheesy:
Henning wrote:but you dont have to use that sprite.Yeah, I've thought about it, but then I somehow need to tell the css to not "serve" the bg part of the sprite, but a new separate png.
Just create a new file: just a few pixels wide and as long as you want ... pfff - Regards,
Vidar
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
let's assume you have a background pic 3px wide and 500px high.
to use that add to your css:
body div.background {height:500px;background: url(../images/light4.png) repeat-x;}
should work tho I havent used Afterburner yet.
Perhaps I'll do when there is a gantry-version of Afterburner
-
-
-
- Ben Lee
- Elite Rocketeer
- Posts: 4193
- Thanks: 42
-
Henning's way works and will be much easier I think.
Look in the css file specific to the style you're using, for this example I'm using light4.css.
On line 17, you'll find:.background {position:absolute;width:100%;height:130px;background:url(../images/light4.png) 0 -384px repeat-x;}
This is the part we're working with:
background:url(../images/light4.png) 0 -384px repeat-x
Change it to:
background:url(../images/YOUR_NEW_BACKGROUND.png) 0 0 repeat-x
And upload your new background image to the templates "/images/" directory.
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
btw I always try to find a selector with a higher specificity before I change single parts of the css.
So you can keep them in one place.
When rt releases bugfixes its much easier to upgrade.
body div.background
{height:500px;background: url(../images/YOUR-PIC) repeat-x;}
has just a higher priority then
.background
{position:absolute;width:100%;height:130px;background:url(../images/light4.png) 0 -384px repeat-x;}
because of the cascade it keeps position and width while height and background gets a change ... - Last Edit: 15 years 1 week ago by Henning.
-
Time to create page: 0.057 seconds