background gradients and background images together

[dupalo]

Hi there, I have this html

<div id="myDiv">
...
</div>

abd this css

#myDiv{
  /*border:1px solid green;*/
  /*width:940px;*/
  padding:10px 0 0 20px;
  height:160px;
  background: url("image.png");
  border:1px solid #d4d1c8;
    /* IE10 Consumer Preview */ 
background-image:url("image.png"), -ms-linear-gradient(bottom, #F3F4F4 0%, #FFFFFF 100%);
/* Mozilla Firefox */ 
background-image: url("image.png"), -moz-linear-gradient(bottom, #F3F4F4 0%, #FFFFFF 100%);
/* Opera */ 
background-image:url("image.png"), -o-linear-gradient(bottom, #F3F4F4 0%, #FFFFFF 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: url("image.png"), -webkit-gradient(linear, left bottom, left top, color-stop(0, #F3F4F4), color-stop(1, #FFFFFF));
/* Webkit (Chrome 11+) */ 
background-image: url("image.png"), -webkit-linear-gradient(bottom, #F3F4F4 0%, #FFFFFF 100%);
/* W3C Markup, IE10 Release Preview */ 
background-image: url("image.png"), linear-gradient(to top, #F3F4F4 0%, #FFFFFF 100%);
background-position:100% 60%;
background-repeat:no-repeat;
  }

Now, I am having a really big problem:
IE7 and IE8 that don't show the background image for whatever reason. I kind of expect that therefore I purposely left this line at the top background: url("image.png") thinking I could use it as fallback in case a browser doesn't support what seems to be effectively a double background image (the second being the gradient).
I am a bit lost, how would I solve this please? I need the background image to show up in every browser

[rainborick]

Older versions of IE don't support multiple background images, so they ignore attempts to use them - which can cause those browsers to ignore previous valid settings. You need to use conditionals to override or supplement your CSS3 background settings, as in:

 <!--[if lt IE 9]>
 <style type="text/css">
  #myDiv { background: url("image.png"); }
 </style>
 <![endif]-->

[dupalo]

Hi rainborick, thanks for that. Is there somewhere it says that IEs don't support that (not that I don't believe it of course but...it's a long story, I need to show somebody that this is officially stated somewhere!). About fixing the issue then, I will do as you suggested and use the above fix. Now, when you say "older version of IE", I presume you mean IE7 and 8?
thanks

[rainborick]

There's an excellent CSS compatibility resource online called "Can I Use". A quick search will point you to it. And, yes, I meant any version prior to IE9.

[dupalo]

thanks for the link, really useful tool.
I tried the code and it works a treat, thanks a lot!