Does Firefox / Opera support positioning / multiple background images?

Question

Having problems getting certain background images to display in Firefox / Opera, all other browsers play the ball (except, obviously, IE, for which I had to compromise).

Opera does not currently allow multiple background images:

background-image: url('/images/h2_default_bg.png'), url('/images/dashed_bg_default.gif'); background-repeat: no-repeat, repeat-x; background-position: top left, bottom left; 

Also, both Firefox and Opera are awkward when the background image is in pixels:

 background: url('/assets/images/dashed_bg.gif') bottom 2px repeat-x; 

Are there any simple workarounds for any of these issues?

Answer 1

Multiple backgrounds are only supported with Firefox 3.6 and Opera 10.5 . Are these the versions you are testing? Chrome and Safari already support them, which I assume you mean "all other browsers ... except, obviously, IE"

As for your second problem, the spec talks about this background-position syntax :

If two values ​​are specified and at least one value is not a keyword, then the first value represents the horizontal position (or offset), and the second represents the vertical position (or offset).

So you gave them the wrong order. Instead, make 2px bottom .

Answer 2

Opera does not currently allow multiple background images:

There are not many background images in CSS2 / 2.1 that we must adhere to at the moment.

See this quirksmode page for browsers that currently support multiple backgrounds .

As in other settings, the background position definitely works in different browsers, I do not know any incompatibilities there. What exactly is happening in Firefox and Opera?

Answer 3

As you know, all modern browsers have several backgrounds. It has been running in Opera since version 10.5. There is no information on whether IE9 will have it, and if / when IE will ever support it.