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

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.