Truc et astuces : [Chrome] Contourner l’erreur d’affichage de la propriété background-image sur un tr

8 juin 2011, par herve, dans : Trucs et astuces

Un petit tip que je partage avec vous aujourd’hui car j’ai pas mal cherché sur internet une solution qui me convenait.

Le problème que j’ai rencontré est le suivant :
Sous Google Chrome et Safari, l’image de fond attribuée à ma ligne de tableau <tr> ne s’affichait pas correctement, et était reprise par chaque cellule du tableau.

Voici l’aperçu problématique :
erreur affichage

Voici le code html du tableau

<table border="0" cellspacing="1" cellpadding="1">
<tbody>
<tr class="bg_realisation_small">
<td class="bg_realisation_gauche_chrome">
<h3>AVANT</h3>
<img style="width: 260px; height: 195px;" src="realisations-5.jpg" alt="" /></td>
<td class="bg_realisation_droite_chrome">
<h3>APRES</h3>
<img style="width: 260px; height: 195px;" src="realisations-4.jpg" alt="" /></td>
</tr>
</tbody>
</table>

Le principe du hack constiste à supprimer le fond de la balise tr et à l’appliquer aux éléments td en spécifiant la position du fond.

Voici le Css du correctif :

tr.bg_realisation_small {
	width:550px;
	height:290px;
	background-image:url('bg-nos-realisations-small.gif');
	background-repeat:no-repeat;
}
//hack Safari
@media screen and (-webkit-min-device-pixel-ratio:0) {
 
tr.bg_realisation_small { background:none;}
tr.bg_realisation_small .bg_realisation_gauche_chrome,
 tr.bg_realisation_small .bg_realisation_droite_chrome{
 background-image:url('bg-nos-realisations-small.gif');
 }
.bg_realisation_gauche_chrome {
background-repeat:no-repeat;
background-position:top left;
}
.bg_realisation_droite_chrome {
background-repeat:no-repeat;
background-position:top right;
}
}