0

I have this code which works nice in Chrome and Firefox, but on IE only the second background image appears... Do you know why?

    $('input[type=button]').click(function() {
    //search for the button
    var button = document.getElementsByName("contactme");
    //change the image
    button[0].style.background = "url(http://www.restorationsos.com/imgs/loader.gif) no-repeat,  url('http://www.restorationsos.com/imgs/btnBG.gif') repeat-x";
    //change the text
    button[0].value = "We Are Connecting You...";
    button[0].style.textAlign = "right";
    button[0].style.color = "#ea2400";
    //disable the button
    button[0].disabled = true;
});

Live: http://jsfiddle.net/cristiboariu/pUeue/21/

Cristian Boariu
  • 9,603
  • 14
  • 91
  • 162
  • Which IE version. Anyways check: http://stackoverflow.com/questions/423172/can-i-have-multiple-background-images-using-css – roberkules May 24 '11 at 19:24
  • 3
    The multiple-background-images-in-a-single-background-declaration is a CSS3 thing. Anything IE below 8 has uber-crappy CSS support, period. – Marc B May 24 '11 at 19:25

2 Answers2

2

It's simple:

Only IE9+ supports multiple backgrounds images, see:

http://caniuse.com/#search=multiple%20backgrounds

thirtydot
  • 224,678
  • 48
  • 389
  • 349
0

Try adding the css property 

zoom:1;
In IE7 this makes the background image magically appear. Don't ask me why, it just does.
locrizak
  • 12,192
  • 12
  • 60
  • 80
  • didn't scroll over on your code to see that you were trying to put two background images on one div. sorry about that – locrizak May 24 '11 at 19:56