CODEWITHSUNDEEP
css
Mosaic
Mosaic

Reputation: 348

Stretch a background image in IE8

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 not working.

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

Upvotes: 6

Views: 43760

Answers (7)

CodeFirstAndy
CodeFirstAndy

Reputation: 591

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.

Upvotes: 1

Ali Doruk Baykal
Ali Doruk Baykal

Reputation: 93

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.

Upvotes: 0

ecmanaut
ecmanaut

Reputation: 5150

This (demo) does the trick (digestable 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'll want to make sure that the parent div is overflow: hidden; besides having whatever dimensions you want the image to get stretched to fit in.

Upvotes: 0

Zeta
Zeta

Reputation: 105876

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

Upvotes: 12

GGD4V
GGD4V

Reputation: 265

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

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

Upvotes: 3

anddoutoi
anddoutoi

Reputation: 10111

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

Upvotes: 2

Teun Zengerink
Teun Zengerink

Reputation: 4393

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

Upvotes: 1

Related Questions