Multiple Background Images with CSS3

There are two background images on the demo page. The page is a standard Dreamweaver HTML template page, with the styles in the document head. To add a second background image URL, the Dreamweaver style element must be edited manually.

Here’s the relevant rule:

background: url(img/Adelie_Penguin-sm.jpg) right bottom no-repeat,
#FFF url(img/bg.jpg) repeat;

You can view the results in this demo page, if your browser supports it.

If your browser does not yet support multiple background images, here is a screen shot of the Opera browser rendering of this rule.

background images demo screen shot

The various background images are in a comma separated list. The order of the images listed by url in the background rule is important. You can think of the list like layers in Photoshop or like z-index stacking. The first image in the list is at the top of the stacking order. As you add more and more background images to the list, they move to the back in the stacking order.

If the penguin image were second, it would be obscured by the repeating background. However, if the second background image were not repeating, but instead had a no-repeat placement and the top left, then both images would be visible and the listing order of the urls in the background rule would seem to be less significant. Nevertheless, it’s a good habit to keep stacking order in mind when listing the urls for multiple background images — background images in specific positions might overlap each other if the page is resized.

Leave a Reply