CODEWITHSUNDEEP
cssbackground
Nick L
Nick L

Reputation: 55

Best practice for background image

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

Upvotes: 3

Views: 10027

Answers (4)

James Muspratt
James Muspratt

Reputation: 181

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

}

Upvotes: 6

codesandtags
codesandtags

Reputation: 11

The best practice for use a background with an image depends :

a) If you need to show a only color or degrade image, the best practice is to create a small image and repeat the image in the page.

b) If you need to show a large image, you will need to low the quality of the image. (JPEG format is smaller than PNG)

c) Sometimes you could use the fixed the image. for example :

http://www.w3schools.com/cssref/pr_background-position.asp

Regards.

Upvotes: 0

Cam
Cam

Reputation: 1902

Here is a common reset alot of developers use.

*  {
   margin: 0;
  }

If it is a particular IE version you can use this.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Upvotes: 0

Gavin Pickin
Gavin Pickin

Reputation: 742

Have you tried 

html {height:100%}

I think that was the issue with IE... that the body can be 100% but the height isn't 100% by default... so you can override it.

Try it.

Upvotes: 0

Related Questions