dupalo - 10:13 pm on Dec 13, 2012 (gmt 0)

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