Comment obtenir une image d’arrière-plan pleine largeur en CSS ?

Obtenir une image d'arrière-plan pleine largeur en CSS

Dans le développement Web, étendre l'image d'arrière-plan sur toute la largeur d'un élément peut être un exigence commune. Ceci est utile pour créer des mises en page visuellement attrayantes et établir une esthétique cohérente. Pour ce faire, modifions le code CSS fourni :

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

Explication :

• background-size: cover; : Cette propriété garantit que l'arrière-plan l'image couvre toute la largeur de l'élément.
• background-position: center center;: Positionne l'image d'arrière-plan au centre horizontalement et verticalement.
• background-repeat: no-repeat;: Empêche l'image ne se répète pas dans l'élément.

Compatibilité avec les navigateurs :

Cette solution est prise en charge dans :

• Safari 3
• Chrome Quoi qu'il en soit
• IE 9
• Opera 10
• Firefox 3.6 (Firefox 4 prend en charge la version préfixée non-fournisseur)

Solution spécifique à IE :

Pour la compatibilité avec IE, le code CSS suivant peut être utilisé :

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

Crédit :

L'inspiration et le mérite de cette solution reviennent à l'article de Chris Coyier sur https://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!