0

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?

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • it is looking like a chrome bug or not implemented scenarion, although this is on the [CSS3 documentation](http://www.w3.org/TR/css3-background/#background-position), it fails when the `background-position` has more than 2 values even if we input that in a separate property. One way to avoid it completely fail would be extract all the `background-position` pieces from the shorthand and put them on their own property then only `background-property` will fail and not the whole background. – Luizgrs Sep 07 '11 at 19:44
  • I'd rather have the "backup" gradient-only how up, than a background broken by the lack of positioning. – Niet the Dark Absol Sep 07 '11 at 22:46

2 Answers2

1

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...

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
0

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

AlexMorley-Finch
  • 6,785
  • 15
  • 68
  • 103
  • Hey Alex, thanks for answering, but I'm afraid this doesn't answer the question ;) Although I did present the question poorly, it's actually about single background images being positioned, say, 16 pixels away from the bottom right corner. You're supposed to be able to do `right 16px bottom 0` as the background position, but at the time of posting neither Chrome nor Firefox supported this. I believe they do now but I haven't checked. – Niet the Dark Absol Jul 02 '15 at 11:17
  • Ahh, I see. (I probably didn't fully read it properly anyway. My bad!) I'll leave this answer up anyway :) I see what you mean now. I know you can specify pixels `background-position: 25px 150px`, but I believe this is always from the top left, as you mentioned. Not from right or bottom. (I've actually not come across that syntax before). If using Javascript, a simple calculation could be made (though that's not always a valid solution for all situations). I am not aware of any browser updates that allows bottom and right alignments, although I haven't exactly checked. Thanks for the reply – AlexMorley-Finch Jul 02 '15 at 14:56