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 :

  • IE6 Update, aidez les à tuer internet explorer 6

    Update, aidez tuer internet explorer

    IE6 Update est un site qui fournis un javascript qui vous permet d’avertir les personnes utilisant IE6 de changer de navigateur de façon simple et esthétique ! Lire la suite

    Par  Dator
    INTERNET, PROGRAMMATION
  • IE6 à sa rubrique nécrologique !

    rubrique nécrologique

    RIPIe6 est le site nécrologie dédié à Internet Explorer 6, le navigateur de Microsoft sorti en Octobre 2001. Ce dernier, tous le monde le sait, est mort il y a... Lire la suite

    Par  Spawnrider
    INTERNET
  • Transparence sous IE6

    Hier au boulot, (en stage) j’ai eu une petite découpe à faire. Et bien sûr IE6 est venu y mettre son grain de sel. Vivement qu’il meurt lui d’ailleurs ^^. Lire la suite

    Par  Rkueny
    INTERNET, PROGRAMMATION
  • IE6 Must Die : affichez votre soutien sur Twitter

    Must affichez votre soutien Twitter

    Pour ceux qui veulent que IE6 (Internet Explorer 6) disparaisse, vous pouvez afficher votre soutien sur Twitter en allant ici : http://twibbon. Lire la suite

    Par  Eogez
    HIGH TECH, INFORMATIQUE, INTERNET, LOGICIELS, WEB2.0
  • Faut-il encore suivre IE6

    StatCounter publie régulièrement des statistiques d'utilisation des différentes versions de navigateurs utilisés par les visiteurs. La première bonne nouvelle,... Lire la suite

    Par  Easyconcept
    INTERNET
  • Google aide le monde à en finir avec IE6

    via ubergizmo.com Ubergizmo nous apprend qu’après Docs et Sites, c’est au tour de Gmail et Agenda de perdre officiellement le support support IE6. Lire la suite

    Par  Wavebygoogle
    INTERNET
  • Mais jetez donc IE6 à la poubelle !

    2001. C'est l'année de développement de ce navigateur. Depuis, neuf ans sont passés. Neuf ans qui ont suffit à montrer les carences de ce dinosaure pour le Web... Lire la suite

    Par  Easyconcept
    INTERNET

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