Multiple Background Images In CSS3

Backgrounds are not always perfectly tiled repetitions of images. Sometimes they are single images, such as the background image we used in the fixed-width example in the last entry.

After carefully cropping and optimizing the original source of that background image, we can make the result fairly small – around 15K as a JPEG or PNG-8. While this has been the traditional method, there are a few drawbacks:

• It is impossible to position the individual components of the image via CSS – you can move the image as a whole, but cannot change the spacing between individual components without re-editing the image in PhotoShop and re-exporting.

In CSS3 it is possible to set multiple backgrounds for elements, which means that each of these components could be clipped out as a separate image (using PhotoShop’s Slice tool or similar) and positioned independently. It is simply an extension of the existing background-image property:

Note that the images and their positions are listed in order, separated by commas. Also note that images can overlap each other. This now makes it possible to move the background images separately, and, if you wish, make the design fluid once more.