Cas d'un PNG dans une CSS (en image de fond)

Cette technique fonctionne à 2 conditions :

  • le bloc recevant l'image de fond doit être positionné en absolute ou avoir ses propriétés width ou height fixées
  • l'image ne peut être ni répétée ni positionnée

Voici un bloc auquel nous allons appliquer un png en image de fond :

<div id="test">	
	<ul>
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
	</ul>		
</div>

Voici ensuite le code CSS :

#test{
	width:400px;
	background: url("fond.png") no-repeat  0 0;
}

Pour IE, grâce aux commentaires conditionnels, nous allons ensuite annuler l'image de fond et appliquer la propriété filter à la place :

<!--[if lt IE 7]>
<style type="text/css" media="screen">
#test{
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fond.png', sizingMethod='crop');
}
</style>		
<![endif]-->

la propriété sizingMethod peut recevoir comme valeur 'image', 'scale' ou 'crop'. La valeur 'scale' ajuste les dimensions de l'image à la taille du bloc, pour plus de détail je vous invite à consulter la doc officielle chez Microsoft.

Bizarrement, l'url de l'image dans la propriété filter doit être relative à la page html, et non à la feuille de style, pensez-y si les 2 fichiers ne sont pas au même niveau.

Un problème de liens...

Vous allez maintenant vous rendre compte que les liens à l'intérieur de notre bloc ne fonctionnent pas... plutôt bloquant.

Pour y remédier, il faut alors rajouter la propriété position:relative aux liens :

<!--[if lt IE 7]>
<style type="text/css" media="screen">
#test{
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fond.png', sizingMethod='crop');
}	
#test a{
	position:relative;
}
</style>		
<![endif]-->

Et voilà, les liens redeviennent cliquables.

Cas d'une image dans le corps de page

Ici une seule condition : les attributs width et height de l'image doivent être fixés.

Le principe consiste à remplacer l'image par un gif transparent et lui appliquer en fond le png grâce à l'attribut filter ci-dessus. Ce comportement peut être automatisé grâce à un fichier htc (à télécharger en annexe). On applique simplement ce comportement aux images, avec la propriété CSS behavior :

img{
	behavior: url("png.htc");
}

pour affiner la chose, on peut choisir de l'utiliser dans une classe :

img.png{
	behavior: url("png.htc");
}

<img src="image.png" width="100" height="100" alt="" class="png" />

Placez de préférence les fichiers png.htc et blank.gif au même endroit que votre page html. Ici encore, l'url du fichier htc doit être relative à la page html, et non à la feuille de style.

Bien évidement, behavior et filter ne sont pas des propriétés valides. Encore une fois utilisez les commentaires conditionnels ;)

Pour conclure, je vous conseille de rester prudent avec ces techniques sur des projets sensibles (et des clients pointilleux... ;) ), et prenez le temps de tester "en conditions réelles" avant de vous prononcer sur la faisabilité.