Fix The Background Image In Ie8

March 09, 2024 Post a Comment

In all browser I use the following css rules, and it works // it fits the background image to container background-size: contain; background-size: cover; Are there css rules to m

Solution 1:

I had also the same problem but by going through this below link my problem solved

http://css-tricks.com/perfect-full-page-background-image/

Solution 2:

There's a jQuery plugin or this javascript fallback with filter

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

Check the same page for more cross-browser methods

Solution 3:

you can do it like this:

<!DOCTYPE html><html><head><title>Test</title></head><body><imgsrc="http://i47.photobucket.com/albums/f156/Bob_McBobBob/Awesome_Background_by_smirfy.jpg"class="bgimg" /><divclass="frame"><divclass="contents">
    page contents
    page contents
    page contents
    page contents
    page contents
    </div></div></body></html>

css:

html {
 background:#000; 
}

html, body { 
  padding:0;
  margin:0;
  overflow:hidden;
  height:100%;
}

.bgimg {
  position:absolute;
  z-index:-1;
  width:100%;
  height:100%;
}

.frame {
  color:white;
  width:100%;
  height:100%;
  overflow:auto;
}

.contents {
 padding:10px; 
}

demo site: http://jsbin.com/enevov/1/edit

Baca Juga

you can achieve different effects by changing width:100%; height:100%; on .bgimg, to accomplish different effects, depending on whether you want a distortion or not, for instance just width: 100% will make it touch across the top, etc...

hope this helps -ck

Solution 4:

This works for me to stretch image on full window in IE8