IE6, png et background-image : une solution

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.

Une solution partielle existe : 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".

code css :
.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.

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...Ca c'est con.

Quelques liens pour terminer

> Alsacréation : les filtres AlphaImageLoader
> Microsoft : AlphaImageLoader