Different background for each page, same CSS doc

liunx

Guest
Hello. I've run into a problem with my backgrounds. I want to have a different background image for each of the pages on my site, but using only one external CSS document. Is this possible without making a separate CSS file for each page? (which would sort of defeat the object of having an external CSS in the first place!)

Here's the code (if it matters...)

body {
background: url('bg2.jpg') no-repeat fixed bottom right;
blah blah....etc.
}

I was thinking perhaps putting the background code somewhere else (not in body), just not sure where. Appreciate any help.You could use PHP or JavaScript, but as of currently CSS2 cannot do that. Perhaps CSS3 will, but I haven't looked up that much on CSS3...Originally posted by Jona
You could use PHP or JavaScript, but as of currently CSS2 cannot do that. Perhaps CSS3 will, but I haven't looked up that much on CSS3...

couldn't you assign a seperate id to every body on each page? so:

page 1:
<html>
...
<body id="page1">
...

CSS:
body#page 1 {
background: url("./");

page 2:
repeat cept id page2

page3:
etc...




Shouldnt that work?Originally posted by pawky
couldn't you assign a seperate id to every body on each page?

If you want an 18KB CSS file... :rolleyes:

Unless there are only a few pages you want to do this on.Set a default background for the BODY in your external stylesheet, then just hardcode the specific CSS into each page. Right now it’s probably the best way to do it.Just slap a bit of php in yer css like so:

background-image:<?php echo "tehimage" . $number . ".jpg"; ?>;


then tell yer server to process files with a .css extension as php, but send with a mime of text/css.Mr Herer, that would cause extra, unnecessary stress on the server. Instead, I would suggest either changing exlusively an .htaccess file (not available on all servers), or using a .php extension for the CSS file itself, and setting the MIME type explicitly via PHP:


header("Content-Type: text/css");


Though, remember, the original poster has not specified whether he has PHP access or not.Plus there's the fact that i missed a chunk of the css code too. lol












D'oh!

Anyway. Why not just do the blatantly obvious thing and use what I said in a single-declaration style block in the head? Oh yeah, that's why, because he might not have php.Originally posted by Jona
If you want an 18KB CSS file... :rolleyes:

Unless there are only a few pages you want to do this on.

yes, but it works :P and he could always do it inline which would only add a small amount to each individual page and not make that big of a difference over all.

Mr Herer, nice link in your sig :PYeah, inline styles would be the way to go. It might actually save a little bandwidth, since the CSS file in cache won't have to be reloaded each time you visit a page with a different background, and there's no worries if the same background will appear where it shouldn't as a result of the cache.

And I agree with pawky, that link in your signature is awesome. Are you going to make a blog? :DOriginally posted by pawky
and he could always do it inline which would only add a small amount to each individual page and not make that big of a difference over all.

Originally posted by Jona
Yeah, inline styles would be the way to go. It might actually save a little bandwidth, since the CSS file in cache won't have to be reloaded each time you visit a page with a different background, and there's no worries if the same background will appear where it shouldn't as a result of the cache.

Just note I mentioned this first. :D

Originally posted by Jona
And I agree with pawky, that link in your signature is awesome. Are you going to make a blog? :D
You really shouldn’t begin your sentences with “and” or “but”, but that’s beside the point. What’s all the commotion over the link in his sig? I click, FF tells me it cannot be found. :confused:It works for me.

Paul, I know not to begin sentences with "and" or "but," but this is a forum where mistakes are frequent and grammar is often disregarded. You put a comma after a quote, when it should have before it; don't say that it can be either way, because that's not true. Let's not get into techinicalities as far as grammar, though. If you want to correct people's grammar go edit articles posted for the WebDevGuide or go look in some magazine for errors, but don't come here. This forum isn't for that.Originally posted by Jona
You put a comma after a quote, when it should have before it; don't say that it can be either way, because that's not true.
You’re right, it can’t be either way. The punction goes inside the quotations if it is contained within the quoted text, otherwise it goes outside the quotations.

It was a sidenote, there’s no reason to be so defensive.

I tried the link once more, and it worked. :D Funny stuff.Originally posted by Jona
Yeah, inline styles would be the way to go. It might actually save a little bandwidth, since the CSS file in cache won't have to be reloaded each time you visit a page with a different background, and there's no worries if the same background will appear where it shouldn't as a result of the cache.

just curious, but why would the css file in cache have to reload every time you visit a new page if it was all in the external page? I dont c why the css file itself would have to reload, just the initial load of the css file would be very long, maybe im missing something :P but i dont c why, thx


And I agree with pawky, that link in your signature is awesome. Are you going to make a blog? :D

yea, they agree :POriginally posted by pawky
just curious, but why would the css file in cache have to reload every time you visit a new page if it was all in the external page? I dont c why the css file itself would have to reload, just the initial load of the css file would be very long, maybe im missing something :P but i dont c why, thx

I meant with the PHP method mentioned above; because it's the same CSS file with a different source, it would be cached the first time it was loaded, and the page would have to be reloaded twice in order for it to update.Originally posted by Jona
I meant with the PHP method mentioned above; because it's the same CSS file with a different source, it would be cached the first time it was loaded, and the page would have to be reloaded twice in order for it to update.

oh, ok that makes perfect sense :) thxThanks a lot for all the response guys. I think I'm gonna go with the body id option (suggested early on in this thread) because although the file size is reportedly 18kb, I don't have PHP server access, so it's the cleanest option. PHP may be an idea for the future though, so thanks for the tip.How about including inline styles on the individual pages, instead?I'm guessing that a comparison is made between the last updated note on the css file on the server and a last Download ed note on the cached file. If they don't match (meaning the cached version is not currecnt) then it will be sent again. If this is true then it would probably mean that php directly inside the css file wouldn't work as the file would not get processed again. Resulting in a non-dynamic background. But you may as well have one tiny extra bit happen in a file that's getting processed anyway.

Oh and thanks for the compliments on my site. :D

I might be making a blog. I might go the whole hog and make a forum. Dunno yet. I'm definately making something. At the mo' I'm just making a "drop me a line" form page. Then I'll be making a file upload page so my mates can send me files that way, instead of the (now unavailable) MSN file transfer method.
 
Back
Top