Multiple Backgrounds with CSS3

CSS3 allows web designers to specify multiple background images for box elements, using nothing more than a simple comma-separated list.

Browser support for multiple backgrounds is relatively widespread with Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and even Internet Explorer (9.0+) all implementing the feature.

Here’s a basic example:

This box has two background images, the first a sheep (aligned to the bottom and center) and the second a grass and sky background (aligned to the top-left corner).

Here’s the code for this:

#example1 {
width: 500px;
height: 250px;
background-image: url(sheep.png), url(betweengrassandsky.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}

How it Works

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

Specifying multiple backgrounds using the individual background properties

Multiple background images are specified using a comma-separated list of values for thebackground-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-originand 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-positionvalue 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.

Specifying multiple backgrounds using the ‘background’ shorthand property

Multiple backgrounds can also be specified using the background shorthand property.

The Syntax:

background: [ <bg-layer> , ]* <final-bg-layer>

<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> ||<attachment> || <box>{1,2} 

<final-bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> ||<attachment> || <box>{1,2} || <background-color>

Note: background-color is only permitted in the final background layer.

Example:

background: url(sheep.png) center bottom no-repeat, url(betweengrassandsky.png) left top no-repeat;

The CSS3 Backgrounds and Borders specification offers further clarification of the backgroundshorthand 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:

Example A

The code for this can be written in one of two ways, either:

#exampleA {
width: 500px;
height: 250px;
background-image: url(decoration.png), url(ribbon.png), url(old_paper.jpg);
background-repeat: no-repeat;
background-position: left top, right bottom, left top;
}

or:

#exampleA {
width: 500px;
height: 250px;
background: url(decoration.png) left top no-repeat, url(ribbon.png) right bottom no-repeat, url(old_paper.jpg) left top no-repeat;
}

Example B

The example below (courtesy of Opera) demonstrates how multiple backgrounds can be used to create thesliding doors technique:

This is the content we want framed with sliding doors

 

And another block

Again, the code for this can be written in one of two ways, either:

#exampleB {
display: inline-block;
margin: 1em; padding: 1em;
background-image: url(left.png), url(right.png), url(main.png);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: left top, right top, left top ;
}

or:

#exampleB {
width: 500px;
height: 250px;
background: url(left.png) left top no-repeat, url(right.png) right top no-repeat, url(main.png) left top repeat-x;
}