css background-size cover in internet explorer 7 [duplicate]_问答_开发者

css background-size cover in internet explorer 7 [duplicate]

开发者 https://www.devze.com 2023-03-03 05:13 出处：网络

This question already has answers here: Good "background-size: cover" fallbacks/shims/tricks for cross-browser compatibility on DIVs?

This question already has answers here: Good "background-size: cover" fallbacks/shims/tricks for cross-browser compatibility on DIVs? (4 answers) Closed 9 years ago.

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