Best practice for background image

background, css

Solution

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')";

}

Problem

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; } ```

Original source