css background-size cover in internet explorer 7 [duplicate]
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 开发者_如何学Csolution?
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>
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.
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
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.
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>
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/
Two ideas: 1. I'm currently trying to see if this filter helps:
AlphaImageLoader
- 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...
加载中,请稍侯......
精彩评论