According to QuirksMode, defining multiple backgrounds works in (at least) IE9, Chrome and Firefox 3.6.
I have the following CSS:
background: #190110 url("http://static.pokefarm.org/_img/gradients/dark_sky.png") repeat-x fixed left top;
background: url("http://static.pokefarm.org/_img/gradients/dark_edge.png") no-repeat fixed -16px bottom, url("http://static.pokefarm.org/_img/gradients/dark_edge.png") no-repeat fixed right -16px bottom, url("http://static.pokefarm.org/_img/gradients/dark_ground1.png") repeat-x fixed left bottom, url("http://static.pokefarm.org/_img/gradients/dark_ground2.png") repeat-x fixed left 50px bottom 50px, url("http://static.pokefarm.org/_img/gradients/dark_ground3.png") repeat-x fixed left bottom 200px, url("http://static.pokefarm.org/_img/gradients/dark_lightning.png") no-repeat fixed right -100px top -150px, #190110 url("http://static.pokefarm.org/_img/gradients/dark_sky.png") repeat-x fixed left top;
That's quite a complex background, but it's to make a "Dark World" background effect for my online game. Essentially it's three different "ground" layers, a gradient sky, two "edges" to sort of fade out the ground near the sides of the screen, and lightning. Older browsers should see only the "dark sky" gradient background.
The resulting effect should be: Screenshot.
Now on to the problem: IE9 displays this effect perfectly, and can even do the optional "animated background" effect where the ground layers scroll in parallax fashion and the lightning flashes and distorts with CSS transforms. Firefox 6 and Chrome 13, however, display only the fallback gradient-only background.
Does anyone have any idea why this happens?
To answer my own question, neither Chrome nor Firefox support more than two values in background-position. Makes me wonder how they would place a background image relative to the lower-right corner...
