Ce qu'il faut savoir
- Méthode préférée: utilisez la propriété CSS3 pour taille d'arrière-plan et réglez-le sur couverture.
- Autre méthode: utilisez la propriété CSS3 pour taille d'arrière-plan mis à 100% et position-arrière-plan mis à centre.
Cet article explique deux façons d'étirer une image d'arrière-plan pour l'adapter à une page Web à l'aide de CSS3.
La manière moderne
Les images sont une partie importante de l'attractivité conceptions de sites Web. Ils ajoutent un intérêt visuel à une page et vous aident à réaliser le design que vous recherchez. Lorsque vous travaillez avec des images d'arrière-plan, vous souhaiterez peut-être qu'une image s'étire pour s'adapter à la page malgré le large gamme d'appareils et de tailles d'écran.
La meilleure façon d'étirer une image pour l'adapter à l'arrière-plan d'un élément est d'utiliser le CSS3 propriété, pour taille d'arrière-plan, et le mettre égal à couverture.
div {
image d'arrière-plan: url('background.jpg');
taille de l'arrière-plan: couverture ;
background-repeat: pas de répétition ;
}
Jetez un œil à cet exemple en action. Voici le code HTML dans l'image ci-dessous.
Maintenant, jetez un œil au CSS. Ce n'est pas très différent du code ci-dessus. Il y a quelques ajouts pour le rendre plus clair.
Voici maintenant le résultat en plein écran.
En définissant taille d'arrière-plan à couverture, vous garantissez que les navigateurs redimensionneront automatiquement l'image d'arrière-plan, quelle que soit sa taille, pour couvrir toute la zone de l'élément HTML auquel elle est appliquée. Jetez un œil à une fenêtre plus étroite.
Selon caniuse.com, cette méthode est prise en charge par plus de 90 % des navigateurs, ce qui en fait un choix évident dans la plupart des situations. Cela crée des problèmes avec les navigateurs Microsoft, donc une solution de secours peut être nécessaire.
La voie de repli
Voici un exemple qui utilise une image d'arrière-plan pour le corps d'une page et qui définit la taille sur 100% afin qu'il s'étire toujours pour s'adapter à l'écran. Cette méthode n'est pas parfaite et peut créer de l'espace non couvert, mais en utilisant le position-arrière-plan propriété, vous devriez être en mesure d'éliminer le problème et de toujours prendre en charge les anciens navigateurs.
corps {
arrière-plan: url('bgimage.jpg');
background-repeat: pas de répétition ;
taille de l'arrière-plan: 100 % ;
position d'arrière-plan: centre ;
}
En utilisant l'exemple ci-dessus avec le taille d'arrière-plan mis à 100% au lieu de cela, vous pouvez voir que le CSS est essentiellement le même.
Le résultat sur un navigateur plein écran ou avec des dimensions similaires à l'image est presque identique. Cependant, avec un écran plus étroit, les défauts commencent à apparaître.
De toute évidence, ce n'est pas idéal, mais cela fonctionnera comme une solution de repli.
Selon caniuse.com, cette propriété fonctionne dans IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ et sur tous les principaux navigateurs mobiles. Cela vous couvre pour tous les navigateurs modernes disponibles aujourd'hui, ce qui signifie que vous devez utiliser cette propriété sans craindre qu'elle ne fonctionne pas sur l'écran de quelqu'un.
Entre ces deux méthodes, vous ne devriez avoir aucune difficulté à prendre en charge presque tous les navigateurs. Comme taille de l'arrière-plan: couverture gagne encore plus d'acceptation parmi les navigateurs, même ce repli deviendra inutile. De toute évidence, CSS3 et les pratiques de conception plus réactives ont simplifié et rationalisé l'utilisation d'images comme arrière-plans adaptatifs dans les éléments HTML.