css background-size cover in internet explorer 7
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>
Answer
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.