|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.
|Applies to:||all elements|
|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;
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
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.