CSS Multiple Backgrounds Not Working on IE8

CSS Multiple Backgrounds not working on IE8

Multiple Backgrounds is a CSS3 specification. IE8 DOES NOT understand CSS3, and IE9 for that matter doesn't understand it all. To get it to work in older browsers you'll have to combine the images into one, or overlay multiple elements to get them all to display on top of one another. z-index: is your friend :-)

Background image not showing IE8

CSS3 multiple background isn't supported by IE 8 and below. So the comma separated background value it's invalid thus will not work.

And it does not work on IE9, even when it support multiple backgrounds (buggy but it does) because IE9 does NOT support CSS3 Gradient so again it makes entire declaration invalid.

I suggest you use !important on the multiple background declarations but make a single background declaration as last in the line, so IE9 and below can display at least one of the BG's:

background: url('/images/cartWhite.png') 18px 11px no-repeat, -ms-linear-gradient(top,#74c163,#1d7a09) !important;
background: url('/images/cartWhite.png') 18px 11px no-repeat, -moz-linear-gradient(top,#74c163,#1d7a09) !important;
background: url('/images/cartWhite.png') 18px 11px no-repeat, -webkit-linear-gradient(top,#74c163,#1d7a09) !important;
background: url('/images/cartWhite.png') 18px 11px no-repeat, linear- gradient(top,#74c163,#1d7a09) !important;
background: url('/images/cartWhite.png') 18px 11px no-repeat; /* for IE9 and below */

---

As another option, you could use CSS3Pie. Example:

#myElement {
    behavior: url(http://path/to/pie/PIE.htc);
    background: url(bg-image.png) no-repeat #CCC; /*non-CSS3 browsers will use this*/
    background: url(bg-image.png) no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/
    background: url(bg-image.png) no-repeat, -webkit-linear-gradient(#CCC, #EEE); /*new webkit*/
    background: url(bg-image.png) no-repeat, -moz-linear-gradient(#CCC, #EEE); /*gecko*/
    background: url(bg-image.png) no-repeat, -ms-linear-gradient(#CCC, #EEE); /*IE10 preview*/
    background: url(bg-image.png) no-repeat, -o-linear-gradient(#CCC, #EEE); /*opera 11.10+*/
    background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*future CSS3 browsers*/
    -pie-background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*PIE*/
}

Keep in mind it will only work if url of behavior is on the same domain. Read more.

CSS Multiple backgrounds & IE 8 and earlier

You can use the Developer Tools in IE (press F12) and change the Browser Mode to IE8 and then IE7. You can also check out IETester

Multiple Backgrounds CSS3 problems with IE8

You could also target IE8 plus IE7 and IE6 by using

<!--[if lte IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->

This means the conditional will work if it is less than or equal to IE8

Multiple backgrounds - Second image not displaying in IE7 and IE8

Adding with more details

You can use Mordenizer to help the older browser degrade gracefully, http://modernizr.com/docs/#features-css

how to work with mordenizer

install Modernizr, download the file from this page. Then, on your site’s head tag, add a link to the file. For example:

Modernizr does not do anything “magic”. It simply tests the browser and evaluates its capability for supporting over twenty different CSS3/HTML5 features. Based on the result of this check, the library adds to the web page’s element a set of CSS clases (and some JavaScript objects as well) that indicate if the browser support is or is not a given feature.

for example if your css looks like this

#header {
    background: url(background-one.png) top left repeat-x,
    url(background-two.png) bottom left repeat-x;
}

Using Modernizr, your CSS will look instead like this:

#header{
    background: url(background-one.png) top left repeat-x;
}
.multiplebgs #header{
    background: url(background-one.png) top left repeat-x,
    url(background-two.png) bottom left repeat-x;
}

Modernizr will create - on the fly - two different CSS classes, based on the support that the browser provides for the “background” property,the library makes it easy to use - conditionally - the “background” property.

I hope this explains usage.

Multiple background images IE8

CSS3 Multiple Backgrounds for Internet Explorer and legacy Mozilla Firefox

This library brings support for multiple background images to Internet Explorer 6-8 and Firefox <=3.5 by reading the CSS code from style and link tags.

CSS3 browser support extends to background-image, background-position, background-repeat. This library only implements its own property for the shorthand style background property.

http://plugins.jquery.com/project/multiple-bg

Example Usage

Including the Script

All that needs to be included is the jQuery library and this script for these features to work. No extra Javascript coding is required. The minified library is only 8.7kB!

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.multiple-bgs.js"></script>

Writing the CSS

Multiple backgrounds using the background property are read using this Javascript library. Notice how hover and active states are supported.

#ex1 {
    background: url(middle.gif) repeat-x 0 0; /* For unsupported browsers */
    background: url(left.gif) no-repeat 0 0, /* For CSS3 Browsers */
                url(right.gif) no-repeat 100% 0, 
                url(middle.gif) repeat-x 0 0;
}
#ex1:hover {
    background: url(middle-hover.gif) repeat-x 0 0; /* For unsupported browsers */
    background: url(left-hover.gif) no-repeat 0 0, /* For CSS3 Browsers */
                url(right-hover.gif) no-repeat 100% 0, 
                url(middle-hover.gif) repeat-x 0 0;
}
#ex1:active {
    background: url(middle-active.gif) repeat-x 0 0; /* For unsupported browsers */
    background: url(left-active.gif) no-repeat 0 0, /* For CSS3 Browsers */
                url(right-active.gif) no-repeat 100% 0, 
                url(middle-active.gif) repeat-x 0 0;
}

---

Related Topics