Multiple CSS Background Images in Layers

The lower the image, the closer the layer. The problem is that unsupported browsers show NOTHING! You can use http://www.modernizr.com/ to detect the browser compatibility. Here is a list of compatible browsers.

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.

http://www.w3.org/TR/css3-background/#the-background-image

http://snook.ca/archives/html_and_css/multiple-bg-css-gradients

http://css-tricks.com/stacking-order-of-multiple-backgrounds/