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?
The multiple background images for an element can be put in the HTML page using CSS. Use CSS background property to add multiple background images for an element in any pattern and use other CSS property to set the height and width of the images.
CSS allows you to add multiple background images for an element, through the background-image property. The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer.
Which declaration uses the correct syntax for applying two background images to the same element? background-image: url("images/logo.
To add background color in HTML, use the CSS background-color property. Set it to the color name or code you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a table, heading, div, or span tag.
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.
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?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With