Does Firefox/Opera handle positioned/multiple background images?

Question

Having issues getting specific background images to display in Firefox/Opera, all other browsers are playing ball (except obviously IE, for which I've had to compromise).

Currently, Opera won't allow multiple background images like so:

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 both being awkward when a background image is positioned in pixels:

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

Are there any simple workarounds for either of these problems?

Answer 1

Currently, Opera won't allow multiple background images like so:

Multiple background images like that are not possible in CSS2 / 2.1, which at the moment we still have to adhere to.

See this quirksmode page on which browsers currently support multiple backgrounds.

As for the other settings, background position definitely works across browsers, I'm not aware of any incompatibilies there. What exactly happens in Firefox and Opera?

Answer 2

As you found out, multiple backgrounds works in all the modern browsers. It does work in Opera as of version 10.5. There is no information on whether IE9 will have it nor if/when IE will ever support it.

Answer 3

Multiple backgrounds are only supported starting from Firefox 3.6 and Opera 10.5. Are those the versions you're testing in? Chrome and Safari already support them, which I presume you mean with "all other browsers ... except obviously IE"

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

If two values are given 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've given them in the wrong order. Make it 2px bottom instead.

Answer 4

Thanks for all the help guys, great to get such a warm reception on my first post.