How it Works

Multiple background images can be specified using either the individual background properties or the background shorthand property. We’ll first look at an example using the individual background properties.

Multiple background images are specified using a comma-separated list of values for the background-image property, with each value generating a separate ‘background layer’. The the first value in the list represents the top layer (closest to the user), with subsequent layers rendered behind successively.

The Syntax:

background-image: <bg-image> [ , <bg-image> ]*

<bg-image> = <image> | none

Note: a value of ‘none’ still generates a layer.

Example:

background-image: url(sheep.png), url(betweengrassandsky.png);

A comma separated list is also used for the other background properties; background-repeat, background-attachment, background-position, background-clip, background-origin and background-size.

Example:

background-position: center bottom, left top;

The comma separated lists from the individual properties are then matched up, starting with the first value in each list.

If excess values are specified for any of the individual properties they are ignored. For example; if four values are supplied for the background-position property, but only three values are supplied for the background-image property, the fourth value in the list would not be used.

Similarly, if not enough values are supplied for any of the individual properties, the list of values for that particular property are repeated, from the first value, as many times as required. For example; if only two values are supplied for the background-position property, but three values are supplied for the background-image property, the list of values for background-position would be repeated, thus the third background image specified would have the same background-position value as the first.

If a background color is specified, using the background-color property, this is applied as the final background layer, behind any background images.

Example:

The CSS3 Backgrounds and Borders specification offers further clarification of the background shorthand syntax:

The number of comma-separated items defines the number of background layers. Given a valid declaration, for each layer the shorthand first sets the corresponding layer of each of ‘background-position’, ‘background-size’, ‘background-repeat’, ‘background-origin’, ‘background-clip’ and ‘background-attachment’ to that property’s initial value, then assigns any explicit values specified for this layer in the declaration. Finally ‘background-color’ is set to the specified color, if any, else set to its initial value.

If one <box> value is present then it sets both ‘background-origin’ and ‘background-clip’ to that value. If two values are present, then the first sets ‘background-origin’ and the second ‘background-clip’.

Browser Compatibility

Browser support for multiple backgrounds is relatively widespread with all of the main browsers offering support, without the need for vendor prefixes.

Firefox has supported multiple backgrounds since version 3.6 (Gecko 1.9.2), Safari since version 1.3, Chrome since version 10, Opera since version 10.50 (Presto 2.5) and Internet Explorer since version 9.0.

Cross Browser Examples

Here are a couple of examples which should work in all of the browsers detailed above. For each example the code is given using both the individual background properties and the background shorthand property.

Example A

Our first example has an old-style paper background, with additional decorative images aligned to the the top-left and bottom-right corners: