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:

• If the background image is not tiled it tends to lead to fixed-width designs, in order to keep the image in place.
• Much of the file size of the background image is wasted on whitespace.
• 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 CSS 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:

div#container {
	background-color: #feffee; 
	background-image:
		url(images/sigil_1.jpg),
	 		url(images/sigil_2.jpg), 
				url(images/sigil_3.jpg); 
	background-repeat: no-repeat;
	background-position:
		2em 2em,
			right 100px,
				12em 10em; 
};

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.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.