| Opera 10.5 | Works according to the spec |
| Safari 4 | ignores the declaration altogether |
| Firefox 3.6 | Works according to the spec |
| Chrome 4 | Treats the second value as the same as the first. Eg: 10px becomes '10px 10px' |
Layering multiple background images
The background of a box can have multiple layers in CSS3. The number of layers is determined by the number of comma-separated values in the ‘background-image’ property. Note that a value of ‘none’ still creates a layer.
Each of the images is sized, positioned, and tiled according to the corresponding value in the other background properties. The lists are matched up from the first value: excess values at the end are not used. If a property doesn't have enough comma-separated values to match the number of layers, the UA must calculate its used value by repeating the list of values until there are enough.
| Name: | background-image |
|---|---|
| Value: | |
| Initial: | none |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Computed value: | as specified, but with URIs made absolute |
For example, this set of declarations:
background-image: url(flower.png), url(ball.png), url(grass.png); background-position: center center, 20% 80%, top left, bottom right; background-origin: border-box, content-box; background-repeat: no-repeat;
has exactly the same effect as this set with the extra position dropped and the missing values for ‘background-origin’ and ‘background-repeat’ filled in (emphasized for clarity):
background-image: url(flower.png), url(ball.png), url(grass1.png); background-position: center center, 20% 80%, top left; background-origin: border-box, content-box, border-box; background-repeat: no-repeat, no-repeat, no-repeat
See the section “Layering multiple background images” for how ‘background-image’ interacts with other comma-separated background properties to form each background image layer.
When setting a background image, authors should also specify a ‘background-color’ that will preserve contrast with the text for when the image is unavailable.
