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


189

Existe-t-il un moyen connu de faire fonctionner le style CSS background-sizedans IE?


1
Quel effet essayez-vous d'obtenir?
ZippyV

@ZippV J'ai un div d'environ 250 pixels de large. mais l'image d'arrière-plan fait 300 px de large. Je veux que l'image d'arrière-plan s'intègre complètement (taille de l'arrière-plan: 100%) pour qu'elle ne soit pas coupée. Ensuite, :hoverje veux que la taille de l'arrière-plan passe à la largeur totale de 300 pixels (taille de l'arrière-plan: auto) pour créer l'illusion du zoom
JD Isaacks

1
Vous pouvez obtenir le même effet en utilisant une balise img. Si vous avez besoin de quelque chose en plus, utilisez le z-index.
ZippyV

1
@John envisagez de changer la réponse acceptée si la solution de contournement de Dan a fonctionné pour vous!
Pekka

@ZippyV La balise IMG a parfois des effets secondaires inutiles, par exemple elle peut être sélectionnée ou faire un clic droit. Ce sont parfois OK, parfois non.
peterh

Réponses:


312

Un peu tard, mais cela pourrait aussi être utile. Il existe un filtre IE, pour IE 5.5+, que vous pouvez appliquer:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale');

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

Cependant, cela met à l'échelle l'image entière pour qu'elle tienne dans la zone allouée, donc si vous utilisez un sprite, cela peut causer des problèmes.

Spécification: AlphaImageLoader Filter @microsoft


12
Je me demande pourquoi MS n'a pas simplement implémenté cette fonctionnalité en utilisant CSS. Merci beaucoup!
Martin Andersson

2
Quelles versions d'IE prennent en charge cela s'il vous plaît?
ᆼ ᆺ ᆼ

8
Si vous utilisez des liens et des boutons à l'intérieur de l'élément que nous avons défini, ces liens et boutons ne fonctionneront pas. Quelqu'un connaît-il une méthode pour résoudre ce problème?
rubyprince

2
J'ai dû ajouter position: relative; z-index: 999pour entrée, un bouton à l'intérieur de ces divs
rubyprince

10
La méthode de mise à l'échelle ne conserve pas le rapport. Il est donc préférable que votre élément ait le même rapport que votre image.
Yves Van Broekhoven

45

J'ai créé jquery.backgroundSize.js : un plugin jquery 1.5K qui peut être utilisé comme solution de secours IE8 pour les valeurs "cover" et "contain". Jetez un œil à la démo .


12
Selon la documentation de jquery.backgroundSize.js, le plugin est obsolète, et ils recommandent à la place background-size-polyfill .
VOIDHand

La version mise à jour ne fonctionne pas avec background-position: fixed.
Ryan Burney

@VOIDHand Le filtre et le polyfill ne fonctionnaient pas pour moi, j'ai utilisé jquery.backgroundSize pour réussir
Chris Marisic

21

Grâce à cet article, mon css complet pour le bonheur de tous les navigateurs est:

<style>
    .backgroundpic {
        background-image: url('img/home.jpg');
        background-size: cover;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='img/home.jpg',
        sizingMethod='scale');
    }
</style>

Cela fait si longtemps que je n'ai pas travaillé sur ce morceau de code, mais j'aimerais ajouter pour plus de compatibilité avec le navigateur, j'ai ajouté ceci à mon CSS pour plus de compatibilité avec le navigateur:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

@ Gaurav123 try-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
honk31

5
cela fait que mon ie8 affiche deux fois l'image d'arrière-plan - une avec des dimensions mises à l'échelle et la seconde le grand arrière-plan non dimensionné.
arekk

ie7: semble OK, mais ne peut plus cliquer sur les liens. (Pourquoi ie7? Sites gouvernementaux très lents à mettre à jour)
Robbie Matthews

5

Même plus tard, mais cela pourrait être utile aussi. Il y a le plugin jQuery-backstretch que vous pouvez utiliser comme polyfill pour background-size: cover. Je suppose qu'il doit être possible (et assez simple) de récupérer la propriété css-background-url avec jQuery et de la transmettre au plugin jQuery-backstretch. Une bonne pratique serait de tester la prise en charge de la taille d'arrière-plan avec modernizr et d'utiliser ce plugin comme solution de secours.

Le plugin backstretch a été mentionné sur SO ici . Le site jQuery-backstretch-plugin est ici .

De la même manière, vous pouvez créer un plugin jQuery ou un script qui fait fonctionner la taille de l'arrière-plan dans votre situation (taille de l'arrière-plan: 100%) et dans IE8-. Donc, pour répondre à votre question: oui, il y a un moyen, mais il n'y a pas de solution plug-and-play (c'est-à-dire que vous devez coder vous-même).

(avertissement: je n'ai pas examiné à fond le plugin backstretch mais il semble faire la même chose que background-size: cover)


5

Il existe un bon polyfill pour cela: louisremi / background-size-polyfill

Pour citer la documentation:

Téléchargez backgroundize.min.htc sur votre site Web, avec le .htaccess qui enverra le type mime requis par IE (Apache uniquement - il est intégré à nginx, node et IIS).

Partout où vous utilisez background-size dans votre CSS, ajoutez une référence à ce fichier.

.selector { 
    background-size: cover;
    /* The url is relative to the document, not to the css file! */
    /* Prefer absolute urls to avoid confusion. */
    -ms-behavior: url(/backgroundsize.min.htc);
}

Ce polyfill fonctionne juste. background-size: couvrir ou contenir dans IE8. Pas de chichi, pas de chichi.
jimlongo

cette approche prend en charge à la fois containet cover. Il contient 5,7 Ko pas très mal car il sera transféré dans un seul paquet réseau.
SMMousavi

2

Dans IE11 Windows 7, cela a fonctionné pour moi,

background-size: 100% 100%;


0

J'ai essayé avec le script suivant -

.selector { 
background-image: url("img/image.jpg");
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
}

Cela a fonctionné pour moi!


pour quelle version?
nihiser le
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.