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:
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 the background
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 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:
<bg-image> = <image> | none
Note: a value of ‘none’ still generates a layer.
Example:
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:
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.
Specifying multiple backgrounds using the ‘background’ shorthand property
Multiple backgrounds can also be specified using the background shorthand property.
The Syntax:
<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:
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:
Example A
The code for this can be written in one of two ways, either:
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:
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 the sliding doors technique:
Again, the code for this can be written in one of two ways, either:
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:
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;
}
Additional Notes & Further Reading
Further information on multiple backgrounds can be found in the CSS Backgrounds and Borders Level 3 specification, avaliable here.