web-dev-qa-db-fra.com

couverture de taille d'arrière-plan CSS dans Internet Explorer 7

Je sais que l'IE7 ne prend pas en charge background-size cover.

J'ai cherché sur le Web des solutions, mais la seule chose que j'ai, c'est que je devrais mettre un img avec width: 100% et height:100% et le mettre en arrière-plan.

Est-ce la seule solution? J'ai vu des solutions avec -ms-filter mais ça n'a pas marché. Quelqu'un at-il une autre solution?

1 chose spéciale: j'ai plus de 1 div qui a ce background-size propriété de couverture.

Dans Firefox, tout fonctionne (comme c'est surprenant).

Edit1: Mon code ressemble à ceci:

<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>
internet-explorerinternet-explorer-7css
16
eav

En utilisant Modernizr vous pouvez découvrir de quoi le navigateur de l'utilisateur est capable.

Installez Modernizr en le liant dans votre en-tête

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

Et dans votre balise HTML,

<html class="no-js">

En utilisant CSS, vous pouvez styliser votre page comme le navigateur la prend en charge - Consultez la documentation pour quelle détection est prise en charge. Dans ce cas, nous voulons que le background-size classe

Dans votre fichier CSS - Pour les navigateurs sans taille d'arrière-plan (AKA juste IE)

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

et ceci pour les navigateurs qui font:

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

L'utilisation de cette méthode est plus conforme aux normes, car à l'avenir, des balises telles que min-height: 100% pourrait devenir inutilisé.

11
SacredSkull

Consultez ce post pour une réponse:

Comment faire fonctionner la taille d'arrière-plan dans IE?

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

Fonctionne parfaitement dans IE8

5
pasx

Donnez à votre image une classe d'étirés (ou autre) et dans votre CSS, mettez ceci:

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

Assurez-vous de placer votre balise img juste en dessous de la balise <body>.

4
Krimo

J'ai écrit un plugin pour cela:

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>
3
Aram Kocharyan

Deux idées: 1. J'essaie actuellement de voir si ce filtre aide:

AlphaImageLoader

  1. Si la taille d'arrière-plan n'est pas possible dans IE, vous devrez peut-être faire en sorte que votre image d'arrière-plan contienne deux images. La première image devrait être placée d'une manière, donc elle s'affiche automatiquement correctement en IE sans avoir à définir la taille de l'arrière-plan. Pour tous les autres navigateurs, vous pouvez utiliser la taille de l'arrière-plan et la position pour pousser la 2ème image dans la bonne position. Essayez ceci maintenant ...
1
frequent

Cela fonctionne pour moi avec IE7

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

Vous devrez peut-être installer la bibliothèque IE9.js à partir d'ici (fonctionne avec de nombreuses versions d'IE)

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

1
MarkC80