CSS3 multiple backgrounds?

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/开发者_JS百科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...

The original answer is quite old, so I thought I'd add a solution for anybody coming to this page. You can set multiple background positions, just like you can set multiple backgrounds.

Although I'm not sure if support existed when the question was first asked.

It appears that support is pretty stable now. http://caniuse.com/#feat=multibackgrounds

background-image: url(image1.png), url(image2.png);
background-position: center bottom, left top;

You separate the background positions by comma, in the order they are defined in background-image