Some of the new CSS3 features that is really popular today is being able to use multiple background images. Before CSS3 came along, you would have to have several elements or divs stacked on top of each other to create a similar effect. With CSS3, we’re now able to apply several backgrounds into one element.
Here is a sample of CSS that shows how to implement multiple background images.
CSS
[CSS]
.element {
background:
url(‘path/to/image.png’) no-repeat center top, /* this will be at the top */
url(‘path/to/image2.png’) no-repeat 100px 40px, /* this will be in the middle */
url(‘path/to/image3.jpg’) no-repeat; /* this will be on the bottom */
}
[/CSS]
You’ll notice that each image is separated by a comma following the background image properties. You’ll also notice that I’ve commented how the images will be stacked within the background image element showing that the first background image will be the image at the top and the following background images will be subsequently below them.
One thing to consider is that older browsers(I’m looking at you IE6/7/8) will not recognize multiple backgrounds and will show nothing instead, so a good way is to include a fallback background image before applying multiple backgrounds. Here’s an example:
[CSS]
.element {
background: url(‘path/to/image_fallback.png’); /* fallback for older browsers */
background:
url(‘path/to/image.png’) no-repeat center top, /* this will be at the top */
url(‘path/to/image2.png’) no-repeat 100px 40px, /* this will be in the middle */
url(‘path/to/image3.jpg’) no-repeat; /* this will be on the bottom */
}
[/CSS]
Conclusion
While it’s now quite easy to finally allow for multiple background images in CSS, we must take care to also make sure that those users (who may be using older browsers) are still able to at least see some kind of fallback image.
