Best practice for background image

Question

I have a large background image that I am trying to make work. I have it positioned using CSS and it seems fine in everything but IE. For some reason in all version of IE I have tested it leaves a large white gap at the bottom.

I was wondering if there was a best practice I was not aware of.

Thanks in advance for any assistance.

The image is 2500px X 1500px

body
{
margin:0px;
background-image: url(../img/main_bg_2.jpg);
background-repeat:no-repeat;
background-position:center; 
}

I have tried this approach which works too, but the image fills about 700px down than the rest is white on all browsers.

body
{
margin:0px;
background-image: url(../img/main_bg_2.jpg);
background-size:100%,100%;
background-repeat:no-repeat;
}

Answer 1

If your priority is for the image to hit every corner (and you don't mind cropping the image), try the following, taken from Chris Coyier's CSS Tricks site:

html { 
    background: url(../img/main_bg_2.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    /* IE */
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/main_bg_2.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/main_bg_2.jpg', sizingMethod='scale')";

}