Stretch background image in IE8

Question

I am trying to stretch the background image to 100% of the width and height of the parent div. background-size is not supported in IE8. I tried the following code, but it does not work.

.box:before { background: url(images/body_background2.png) no-repeat; display: block; position: absolute; z-index: -1; height: 100%; width: 100%; content: ''; } 

Answer 1

Use <img> with position:fixed;top:0;left:0;width:100%;height:100%; and negative z-index . Unfortunately, there is no way to implement this behavior in IE 8 using only CSS.

See the following article for more information: How do you stretch the background image on a web page .

If you want to use the image as the background for this <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 2

I often use this article to create full-screen backgrounds :)

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

Answer 3

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

Answer 4

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 5

Take a look at https://github.com/louisremi/background-size-polyfill . This is a good plugin, another member of my team ran into the same problem.

Once you include the script in your solution, add the following line to the appropriate CSS class along with any other size / positioning attributes that you might want to add.

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

We have it implemented for images with the full width and background of the widget, and it works.

Answer 6

This ( demo ) does the trick (digestible version of css-only technique # 2 from http://css-tricks.com/perfect-full-page-background-image/ ):

 <div class="background-size_cover"> <img src="images/body_background2.png"> </div> 

and

 .background-size_cover { top: -50%; left: -50%; width: 200%; height: 200%; position: relative; } .background-size_cover img { top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%; min-height: 50%; position: absolute; } 

You want the parent div to be overflow: hidden; besides what sizes you want the image to stretch to fit.

Answer 7

I combined the AlfaImageLoader filter with css3 background-size and worked in all browsers. Here is 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 the background image in your div wrapper in this method.