jimmy_fingers wrote:Is it possible to have more than one background image on a style sheet?
As much as this answer may annoy you, the answer is yes and no.
Yes, you can achieve this. But no, not by providing two background images to the same element. You must find a second element that you can use.
For example, say that you want to add two background images to your entire page. The first background image can target the body element:
body
{
background: #fff url(gradient.gif) top left repeat-x;
}
The second background image can target the html element:
html
{
background: #fff url(watermark.gif) bottom right no-repeat;
}
The html element contains the body element, so you can get your two background images by using the two elements separately.
Now, for any element except the entire page, you must find two separate elements. The easiest way is to simply use two <div> elements directly:
<div id="contentOuter">
<div id="contentInner">
<!-- style content goes here -->
</div>
</div>
Then you need to add your background images to the two separate elements.
#contentOuter
{
background: #fff url(topleft.gif) top left no-repeat;
}
#contentInner
{
background: #fff url(bottomright.gif) bottom right no-repeat;
}
Sure, it's a little bit clumsy, but it does work and there's simply no other way to get two background images working for the same area of the webpage.
Does that help?
Alister