Comment étirer une image d’arrière-plan pour remplir un élément en CSS ?

Étendre les images d'arrière-plan en CSS

Vous souhaitez que votre image d'arrière-plan occupe tout l'espace d'un élément comme une , mais vous n'arrivez pas à obtenir ça s'étire correctement ? Voici une solution CSS simple.

Le script CSS fourni définit une classe appelée "style1" avec les propriétés suivantes :

.style1 {
  background-image: url('http://localhost/msite/images/12.PNG');
  background-repeat: no-repeat;
  background-position: left center;
}

Bien que cela affiche l'image d'arrière-plan sur l'élément, il a gagné ne l'étirez pas pour remplir toute la cellule. Pour y parvenir, nous devons modifier la propriété background :

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

La propriété background-size: cover garantit que l'image d'arrière-plan est redimensionnée pour couvrir l'intégralité de l'élément, sans déformer ses proportions. Pour que l'image reste en place, nous utilisons background-position: center center et background-attachment:fixed.

Cette solution fonctionne dans une large gamme de navigateurs, notamment Safari, Chrome, IE 9 , Opera 10 , et Firefox 3.6 .

Pour Internet Explorer, une solution alternative peut être utilisée :

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
zoom: 1;

Cela utilise un filtre propriétaire pour étirer l'image d'arrière-plan, mais il n'est pris en charge que dans IE.

Crédits : article de Chris Coyier "Image d'arrière-plan parfaite en pleine page" 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!