Background image not showing IE8

Question

For some reason, the background image is not displayed in IE8 and IE9. It appears in IE10, Chrome, and Firefox.

Here is the relevant CSS:

.addCartButton { background: url('/images/cartWhite.png') 18px 11px no-repeat, -ms-linear-gradient(top,#74c163,#1d7a09); background: url('/images/cartWhite.png') 18px 11px no-repeat, -moz-linear-gradient(top,#74c163,#1d7a09); background: url('/images/cartWhite.png') 18px 11px no-repeat, -webkit-linear-gradient(top,#74c163,#1d7a09); background: url('/images/cartWhite.png') 18px 11px no-repeat, linear-gradient(top,#74c163,#1d7a09); } 

Answer 1

CSS3 multiple backgrounds are not supported by IE 8 and below. Therefore, the value separated by a comma is invalid, therefore it will not work.

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

I suggest you use !important in several background ads, but make one background ad last in a line, so IE9 and below can display at least one of BG:

 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 can 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*/ } 

Remember that this will only work if the behavior URL is in the same domain. More details .