Magazine Graphisme

IE6, png et background-image : une solution

Publié le 08 septembre 2008 par Detruk
date

IE6, png et background-image : une solution

IE6 et PNG

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

Vous pourriez être intéressé par :

Retour à La Une de Logo Paperblog

Ces articles peuvent vous intéresser :

LES COMMENTAIRES (4)

Par lolchien
posté le 12 novembre à 22:40
Signaler un abus

Non toi t'es con

Par drole de pixel
posté le 20 janvier à 18:06
Signaler un abus

tu devrais jeter un oeil sur ifipng (rattaché à la bibliothèque jquery)

Par C Stof
posté le 16 décembre à 11:25
Signaler un abus

Merci Bbq pour cet artile ... :)

Par loma
posté le 20 novembre à 20:02
Signaler un abus

Le problème c'est que cet exemple empêche tout lien qui est dans le calque où on a l'image de fond en png. J'ai un menu qui a une image de fond en png. Quand j'applique cette méthode, les liens de mon calque ne sont plus actifs... Donc c'est embêtant

A propos de l’auteur


Detruk 19 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte

Dossier Paperblog

Magazines