First off, this is a great site! It’s late here so please excuse my spelling. I’m racking my brain trying to figure out how to use 2 different background images (top and bottom) for my pages. They are both gradient images 1px by 450px and I can have it repeat like I want it to using REPEAT-X but how do I get both images to show up: Here is the code I am using:
You can only apply one background image per element (CSS3.0 will change that), and only the bottom image shows in your browser because it is read after the top one by the browser – this is where the cascade term comes from in cascading style sheets – each subsequent entry for an element overwrites the previous one.
You could try changing the top ‘body’ element to ‘html’.
Yep, box described it correctly, you can’t apply multiple backgrounds to a single element. CSS3 will support it, but only Safari is honoring that the moment, and even then it’s a bit of a different syntax than you are using.
There are other ways to accomplish what you are trying to do though, but they will likely all use a DIV of some kind, which you mentioned you didn’t want to do. And reason for that?
No, each declaration will overwrite the previous one, whether its within the same stylesheet, in a subsequent stylesheet, in your page head, or in-line – the last instruction that the browser reads will be the one it uses.
Have you not tried the suggestion I offered in my first reply? Utilise your HTML element.