Question

Hi I have the following problem:
When using all browser, it showing background OK. when using IE6,7 or compatibility view no background image showing.
when removing all “background-image” and just leaving fallback, everything works.
Please help.
Here is the CSS:

html,body{
     background: #529BCE;
     background-image: url('Img/bg.png'); /* fallback */
     background-image: url('Img/bg.png'), -webkit-gradient(linear, left top, left bottom, from(#1D3A62), to(#57A3D5)); /* Saf4+, Chrome */
     background-image: url('Img/bg.png'), -webkit-linear-gradient(top, #1D3A62, #57A3D5); /* Chrome 10+, Saf5.1+ */
     background-image: url('Img/bg.png'), -moz-linear-gradient(top, #1D3A62, #57A3D5); /* FF3.6+ */
     background-image: url('Img/bg.png'), -ms-linear-gradient(top, #1D3A62, #57A3D5); /* IE10 */
     background-image: url('Img/bg.png'), -o-linear-gradient(top, #1D3A62, #57A3D5); /* Opera 11.10+ */
     background-image: url('Img/bg.png'), linear-gradient(top, #1D3A62, #57A3D5); /* W3C */
     background-repeat: no-repeat;
     color:#18364B;
     font-family: Arial,Verdana,Geneva,Helvetica,sans-serif;
     font-size:20px;
     line-height:1.2em;
     margin:0;padding:0;
     height: 100%;
     overflow: auto;
    }

Answer 1

try redeclaring the background-image for ie6 and ie7. add the following after your css file:

<!--[if IE 6]><style>html,body{background:#529bce url("../Img/bg.png") 0 0 no-repeat}</style>
<![endif]-->
<!--[if IE 7]><style>html,body{background:#529bce url("../Img/bg.png") 0 0 no-repeat}</style>
<![endif]-->

That should work, although if you’re not seeing a png in IE6, it’s because png is not supported. If you’re still having trouble, alter the styles for each, so that you know what you are targeting, and go from there.