CSS layout question.
- Started
- Last post
- 10 Responses
- TwinLobe
Hey - I've got a quick question...
I'm using CSS-based layout for a site and have a BG image applied via an external CSS:
body {
background-image: url("/img/bg.gif");
}What I need to do is have a different BG image for the other pages, but I want to use the same style sheet.
Anyone have ideas on how to code this for multiple "background-image" attributes?
ANY help would be greatly appreciated!
- agentfour0
make different styles within the same stylesheet(one for each background) not calling them body:
background1 {
background-image: url("/img/bg.gif");
}background2{
background-image: url("/img/bg2.gif");
}etc...
and then apply the class to the body tag on the relative pages:is this what your after or am i missing the point?? i have a habit of doing that.
- agentfour0
my body tag dissappeared
eg:body class="background1"
but with the around it still
- hulja0
actually that's not how you want to do that. the css file will be much larger than necessary and will take longer to load (yes, milliseconds to matter, especially for those still on dial-up)
the best thing to do is to have a css file made for all pages and then add a tag into each page you want a different background with the 'body' element.
body { background-image: url(../img/bkgrd.gif); }
That way, you minimize the css file size and make it much easier to maintain (if you can remember what page background2 class belongs to in 6 months, consider yourself semi-gifted).
my advice.
- agentfour0
think i might change my username to "semi-gifted"
- billyFUN0
hulja, your solution would cause the user to download a different css file for each page instead of one slightly larger css file. I don't really think any potential bandwidth savings would be worthwhile.
And as for maintaining the code that wouldn't be much of a problem if you used more semantic names for the various body classes(or IDs).
eg.
body id="homepage"
body id="contactpage"
etc..
- Redmond0
How about partialy-gifted?
- hulja0
no. you don't understand what i'm saying.
i'm saying to have a css file that is used globaly for all pages. like for p,td tags and other classes used on every page.
then, just put an extra 9 style : tag on the page, under the tag where you call the global.css file.
rather than 'semi-gifted' you can just change your username to 'too much time on my hands'.
sorry man, but i was referring to those of us working on numerous projects a month. after 6 months and 30 projects ago...
when you code, you have to code clearly or you'll screw yourself and anyone you're working with. so 'background1' is not a solution unless you comment that.. which just takes more and more file size.word.
- hulja0
btw, the scripting on this news post sucks when it comes to trying to explain anything with tags.
i've even posed ascii equivilants and they come out totally different (read the '9' and ':' on my last post which were supposed to be opening and closing tag characters)
- agentfour0
what i said first off only requires 1 css file. But that file contains however many styles for however many backgrounds. The code is tiny in size. And i work on about 20-30 different sites a week. the "background1" was just an example, style names can be as descriptive as you want eg. "bghomepage" or "bgprofile" etc.
and yeh all my tag thingybits dissappear when posted.
excuse my blathering
- gabriel_pc0
I'm with billyFUN. One style sheet with a few extra aptly named styles won't hurt. Plus, if you want to change all those background images later on, you don't have to open and edit each page, just one style sheet.