web-dev-qa-db-fra.com

Comment puis-je faire fonctionner la taille de l'arrière-plan dans IE?

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

cssinternet-explorer
188
JD Isaacks

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')";

Toutefois, cela redimensionne l’ensemble de l’image pour s’adapter à la zone allouée. Par conséquent, si vous utilisez un Sprite, des problèmes risquent de se produire.

Spécification: AlphaImageLoader Filter @Microsoft

312
Dan

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

45
Louis-Rémi

Merci à ce post, mon plein css pour le bonheur de navigateur croisé 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 tellement longtemps que je n'ai pas travaillé sur ce morceau de code, mais j'aimerais ajouter pour plus de compatibilité de navigateur, j'ai ajouté cela à mon CSS pour davantage de compatibilité de navigateur:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
21
Scott Dallas

Même plus tard, mais cela pourrait être utile aussi. Il y a le plugin jQuery-backstretch-vous pouvez utiliser comme un remplissage pour la taille de fond: 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 l’alimenter dans le plugin jQuery-backstretch. Une bonne pratique serait de tester modernizr pour la prise en charge de l’arrière-plan avec l’affichage en arrière-plan et d’utiliser ce plugin comme solution de secours.

Le plug-in 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 plug-in ou un script jQuery qui optimise la taille de l'arrière-plan dans votre cas (taille de l'arrière-plan: 100%) et dans IE8-. Donc, pour répondre à votre question: oui il y a un moyen mais atm il n'y a pas de solution plug-and-play (c'est à dire que vous devez coder vous-même).

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

5
metatron

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

Pour citer la documentation:

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

Chaque fois que 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);
}
5
Dorian

Dans IE11 Windows 7 cela a fonctionné pour moi,

background-size: 100% 100%;
2
Jana

vous pouvez utiliser ce fichier ( https://github.com/louisremi/background-size-polyfill "polyfill de taille de l’arrière-plan") pour IE8 qui est très simple à utiliser:

.selector {
background-size: cover;
-ms-behavior: url(/backgroundsize.min.htc);
}
0
user5251472

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!

0
Bulla