IE6, png et background-image : une solution

Au fil de mes recherches sur le web j’ai trouvé un moyen pour afficher des images au format png24 sous IE6 lorsqu’elles sont placées en background-image. Il existe de nombreux moyen d’afficher des png sous IE6 : pngfix.js , pngbehavior.htc, iepngfix.htc, etc.. Or, lorsqu’il s’agit de background-image, toutes ces méthodes ne fonctionnent plus.vUne solution partielle existe : Les filtres AlphaImageLoader.

Les filtres AlphaImageLoader : c’est quoi ?

Je vais reprendre la petite explication du site Alsacreation car tout y est dit :

À partir de la version 5.5, Internet Explorer intègre le support de fonctions propriétaires permettant de faire appel à DirectX pour certaines manipulations graphiques. L’une de ces manipulations graphiques consiste à intercaler, entre le fond d’un bloc et son contenu, une image avec transparence graduelle.

Comment ça marche ?

Dans cet exemple, je souhaite intégrer une image de fond dans un div dont la class est : « png-test ».

.png-test{
float:left;
background:url(pngico.png) 0 0 no-repeat;
*background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pngico.png');
width:128px;
height:128px;
}

Explication : On cible IE6 grace à l’étoile * puis on supprime le background pour le remplacer par le filtre AlphaImageLoader.

Il y a un mais…

Comme tout n’est jamais parfait cette technique comporte quelques inconvénients : la propriété background-position n’est pas prise en compte sous IE6, et la propriété background-repeat n’est prise en compte que partiellement. Pour que votre image en png se répète dans le div conteneur, il faut utiliser « sizingMethod= »scale ».

exemple:

.png-test{
float:left;
background:url(pngico.png) 0 0 repeat-y;
*background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pngico.png','sizing-method=scale');
width:128px;
height:128px;
}

Autre inconvénient majeur, il est impossible d’utiliser cette technique pour des liens avec un changement de l’image de background lors du rollover… Et un petit dernier pour la route, les filtres ne passent pas la validation du W3C…

Quelques liens suppplémentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

CommentLuv badge