16

I know that the IE7 does not support background-size cover.

I searched the web for some solutions, but the only thing i've got is that I should put a img with width: 100% and height:100% and put it as the background.

Is this the only solution? I've seen some solutions with -ms-filter but it didn't work. Does anybody have another solution?

1 special thing: I have more than 1 div wich has this background-size cover property.

In firefox everything works (how surprising).

Edit1: My Code looks like this:

<div class="section" id="section1">here should be the first picture as the background!!</div>
<div class="section" id="section2">here should be the second picture as the background!!</div>
<div class="section" id="section3">here should be the third picture as the background!!</div>
eav
  • 2,123
  • 7
  • 25
  • 34
  • 4
    read this article http://css-tricks.com/perfect-full-page-background-image/ – sandeep May 05 '11 at 09:42
  • @sandeep, do you mean the first ie-fix? – eav May 05 '11 at 11:12
  • @Sai: Ehm i meant position... anyway it should work in ie. everybody knows what i mean.. – eav May 05 '11 at 11:12
  • @eav, cover property for ff,chrome etc & for IE you can use filter which give same effect as cover property give. – sandeep May 05 '11 at 11:16
  • @sandeep, not really I had this code in my css: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/kiesel.jpg', sizingMethod='scale'); !important -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/kiesel.jpg', sizingMethod='scale')"; !important – eav May 05 '11 at 11:18
  • @sandeep, i had exactly this problem wich is written in the page css-tricks. read this: Update: Matt Litherland writes in to say that anyone trying to use the above IE filters and having problems with scrollbars or dead links or whatever else (like Pierre above) should try NOT using them on the html or body element. But instead a fixed position div with 100% width and height. – eav May 05 '11 at 11:20
  • @eva, he is write the cover property flow the div in which it's given & if you want it's not scroll with scroller then give the div position:fixed; width & height 100% .It's apply not only IE but other browser also. – sandeep May 05 '11 at 11:37
  • @sandeep, i think we don't understand us... look at this site with the internet explorer, i think you'll understand me: http://www.avsar.ch/tmp/html/ – eav May 05 '11 at 12:05

6 Answers6

11

Using Modernizr you can discover what the user's browser is capable of.

Install Modernizr by linking it in your header

<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>

And in your HTML tag,

<html class="no-js">

Using CSS you can style your page as the browser supports it - Check the documentation for what detection is supported. In this case, we want the background-size class

In your CSS file - For browsers without background-size (AKA just IE)

.no-background-size #image{
background-image: url(lol.png);
min-height: 100%;
min-width: 100%;
}

and this for browsers that do:

.background-size #image{
background-image: url(lol.png);
background-size: cover;
}

Using this method is more standards compliant, because in the future tags such as min-height: 100% could become unused.

Peter Clotworthy
  • 144
  • 3
  • 13
5

Check this post for an answer:

How do I make background-size work in IE?

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/someimage.png',sizingMethod='scale')";

Works perfectly in IE8

Community
  • 1
  • 1
pasx
  • 2,718
  • 1
  • 34
  • 26
4

Give your image a class of streched (or whatever else) and in your css put this :

img.stretched {
 min-height: 100%;
 min-width: 1024px;
 width: 100%;
 height: auto;
 position: fixed;
 top: 0;
 left: 0;
}

Be sure to put your img tag right below the <body> tag.

Krimo
  • 954
  • 8
  • 20
  • i have no image in html. it's the css-property... – eav May 05 '11 at 10:50
  • @eav : if you really don't want to insert an img tag in your document, at least do it dynamically via Javascript. Otherwise you'll be left with only partial browser support. For instance with jQuery you could do : `$("#section1").append("");` – Krimo May 05 '11 at 12:49
  • Yeah thats right... How sad that there are still some internet explorer 7 user... anyway i could also put the img thag into the section1. thats not my problem. :-) – eav May 06 '11 at 06:57
  • need to add z-index:-10; in the styles – Avisek Chakraborty Aug 18 '14 at 12:08
3

I've written a plugin for this:

https://github.com/aramkocharyan/CSS-Background-Size-jQuery-Plugin

<div style="width: 400px; height: 300px;">
    <img class="background-size-cover" src="apple.jpg" />
</div>

<script>
$(document).ready(function() {
    $('.background-size-cover').bgdSize('cover');
});
</script>
Aram Kocharyan
  • 20,165
  • 11
  • 81
  • 96
1

This works for me with IE7

http://kimili.com/journal/the-flexible-scalable-background-image-redux

You may need to install the IE9.js library from here (works with many versions of IE)

http://code.google.com/p/ie7-js/

MarkC80
  • 55
  • 5
1

Two ideas: 1. I'm currently trying to see if this filter helps:

AlphaImageLoader

  1. If background-size is not possible in IE, perhaps you would have to make your background-picture contain two images. The first image would have to be placed in a way, so it automatically displays correctly in IE without having to define background-size. For all other browsers you can use background-size and position to push the 2nd image into correct position. Trying this now...
frequent
  • 27,643
  • 59
  • 181
  • 333
  • Filters have unpredictable effects when set on the body tag, or when custom fonts are used. Your mileage may vary. – Jon Hadley Sep 01 '11 at 15:16