Stretch a background image in IE8

Question

I\'m trying to stretch a background image to 100% width and height of the parent div. background-size is not supported in IE8 of-course. I tried the following code but it\'s

Answer 1

Using the AlphaImageLoader filter and setting the sizingMethod to scale seems to do the trick according to Perfect Full Page Background Image.

Answer 2

I combined AlfaImageLoader filter with css3 background-size and worked on all browsers. Here's what i did.

background : url('../images/background.jpg') no-repeat ;
background-size: 100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
            (src='images/background.jpg',sizingMethod='scale');

By the way, you need to put your background image to your wrapper div in this method.

Answer 3

Use a <img> with position:fixed;top:0;left:0;width:100%;height:100%; and negative z-index. There's unfortunately no way to implement this behavior in IE 8 using only CSS.

See the following article for further information: How Do you Stretch a Background Image in a Web Page.

If you wish to use an image as a background for a given <div> try the following approach:

<div class="fullbackground">
    <img class="fullbackground" src="yourImageSrc" />
</div>

.fullbackground{
    position:relative;
}
img.fullbackground{
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
    width:100%; /* alternative: right:0; */
    height:100%; /* alternative: bottom:0; */
}

Answer 4

Have a look at https://github.com/louisremi/background-size-polyfill. This is a nice plugin another member of my team came across for the same issue.

Once you have the script included into your solution, add the following line into the relevant CSS class along with any other sizing/positioning attributes you may wish to add.

-ms-behavior: url(/scripts/backgroundsize.min.htc);

We have this implemented for full width images and widget backgrounds and it works a treat.

Answer 5

HTML:

<img class="fullscreen" src="fullscreen.jpg" />

CSS:

img.fullscreen {
  border:     0;
  height:     auto;
  left:       0;
  min-height: 100%;
  min-width:  1024px;
  padding:    0;
  position:   fixed;
  top:        0;
  width:      100%;
  z-index:    -1001;
}

Answer 6

I use this article often to do my full screen backgrounds :)

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