Comment étirer les images d'arrière-plan pour couvrir des éléments HTML entiers ?

Amélioration des images d'arrière-plan pour couvrir des éléments HTML entiers

Dans cette requête de programmation, nous rencontrons un utilisateur cherchant à étendre une image d'arrière-plan sur l'intégralité d'un cellule. Le code HTML fourni utilise une image d'arrière-plan avec une largeur définie dans un div parent. Le CSS utilisé aligne actuellement l'image au centre gauche.

Pour obtenir l'effet souhaité, nous devons utiliser des propriétés CSS spécifiques qui permettent aux images d'arrière-plan de couvrir toute l'étendue de leurs éléments parents. Le code suivant présente une 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>

Ce code intègre la propriété background-size, qui en conjonction avec la valeur de couverture, permet à l'image d'arrière-plan de s'adapter à la taille de l'élément sans déformer son rapport hauteur/largeur. . De plus, la propriété fixe garantit que l'image reste stationnaire pendant le défilement.

Cette solution est compatible avec divers navigateurs, notamment Safari 3 , Chrome, IE 9 , Opera 10 et Firefox 3.6 .

Pour les navigateurs ne prenant pas en charge la propriété background-size, une solution alternative spécifique à IE existe :

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

Le mérite de cette solution revient à l'article complet de Chris Coyier : http://css-tricks.com/perfect -image-de-fond-pleine-page/.

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!