background-image

Back to the index.

This page tests single and multiple background images.

background-image

This example tests support for background-image.

Text to show where the content area starts

Multiple background images

Assigning more than one background image to an element is also possible.

These are the styles:

div.multiple {
	background-image: url(/pix/logo_quirksmode.gif), url(/pix/logo_quirksmode_inverted.gif);
	background-repeat: repeat-y;
	background-position: top left, top right;
	width: 385px;
	height: 100px;
	border: 1px solid #000000;
}

All properties can have several values separated by commas. For instance, background-position: top left, top right defines the first set, top left, for the first background image, and the second set, top right, for the second.

If a property has one value it counts for all background images. For instance, the repeat-y works on both background images.