Taille de fond IE7 & 8 Hack CSS

Question

Je sais que la taille de l'arrière-plan n'est pas prise en charge pour IE7 et IE8. Je sais aussi qu'il ya une solution d'utiliser AlphaImageLoader comme ci-dessous:

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

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

Mais malheureusement sa ne fonctionne pas. Aucune suggestion?

Voici mon code CSS:

.useBGImage { 
    background-image: url('../img/BGImage.gif'); 
    background-size: 400px 50px; 
    background-repeat: no-repeat; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
      src='../img/BGImage.gif', sizingMethod='scale'); 
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
       src='../img/BGImage.gif', sizingMethod='scale')"; 
} 

La taille originale de l'image est 400px * 70px.

Answer 1

Ma suggestion serait d'utiliser l'une des bibliothèques de polyfill disponibles pour résoudre ce problème.

Il y a deux que je peux penser à ce qui cadrerait la facture:

• CSS3Pie
• https://github.com/louisremi/background-size-polyfill

Parmi ceux-ci, CSS3Pie couvre une charge plus de fonctionnalités que juste background-size, voilà ce que Soyez bon si vous faites aussi filter styles similaires pour les dégradés, etc. L'autre est un polyfill à un tour juste pour cette fonctionnalité spécifique.

Les deux sont connus pour bien fonctionner, alors choisissez celui que vous préférez, et jetez ces styles filter laids.

Answer 2

Selon la propre documentation de Microsoft sizingMethod='scale'

échelle
                    Elargit ou rétrécit l'image pour remplir les frontières de l'objet.

Comme vous pouvez le voir échelle est un mauvais choix de mots à utiliser car il n'a pas vraiment « échelle », il étend simplement et/ou réduit l'image pour adapter les limites de son conteneur.

Pour redimensionner une image de manière efficace proportionnellement, il est recommandé de supprimer la hauteur et la largeur de l'image dans le balisage HTML.

Utilisez ensuite comme votre CSS ...

.useBGImage { 
    background-image: url('../img/BGImage.gif'); 
    background-repeat: no-repeat; 
    width: auto; /* required for IE8 */ 
    max-width: 100%; 
    height: auto; 
} 

Bonne programmation!