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

Cet article est assez ancien, malgré toute l'attention que j' apporte à mes contenus il est possible que celui-ci ne soit plus d'actualité.
N'hésitez pas à me le signaler si nécessaire via le formulaire de contact.

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 :

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;
}
}

Une fois le hack appliqué, le rendu est maintenant OK sous Chrome ! 🙂

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

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

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

Laisser un commentaire Annuler la réponse