Comment étirer une image d'arrière-plan pour remplir une cellule TD avec CSS ?

Recouvrir la cellule TD avec un étirement d'image

Problème : Améliorer une page Web en étirant une image d'arrière-plan pour la remplir l'intégralité d'une cellule de tableau () en utilisant CSS.

Fragment CSS :

<code class="css"><style>
.style1 {
    background-image: url('http://localhost/msite/images/12.PNG');
    background-repeat: no-repeat;
    background-position: left center;
}
</style></code>

Objectif : Utiliser CSS pour étendre l'image d'arrière-plan afin d'englober l'intégralité de la cellule TD, obtenant ainsi un "étiré" effet.

Solution :

<code class="css">.style1 {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}</code>

Compatibilité :

• Safari 3
• Chrome
• IE 9
• Opéra 10
• Firefox 3.6

Option supplémentaire pour IE :

<code class="css">filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
zoom: 1;</code>

Reconnaissance :

Les crédits reviennent à Chris Coyier pour l'article perspicace trouvé sur : http://css-tricks.com/perfect-full-page-background-image/

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!