Can I have multiple background images using CSS?
Is it possible to have two background images? For instance, I'd like to have one image repeat across the top (repeat-x), and another repeat across the entire page (repeat), where the one across the entire page is behind the one which repeats across the top.
I've found that I can achieve the desired effect for two background images by setting the background of html and body:
html {
background: url(images/bg.png);
}
body {
background: url(images/bgtop.png) repeat-x;
}
Is this "good" CSS? Is there a better method? And what if I wanted three or more background images?
Answer
CSS3 allows this sort of thing and it looks like this:
body {
background-image: url(images/bgtop.png), url(images/bg.png);
background-repeat: repeat-x, repeat;
}
The current versions of all the major browsers now support it, however if you need to support IE8 or below, then the best way you can work around it is to have extra divs:
<body>
<div id="bgTopDiv">
content here
</div>
</body>
body{
background-image: url(images/bg.png);
}
#bgTopDiv{
background-image: url(images/bgTop.png);
background-repeat: repeat-x;
}