Comment étirer une image d'arrière-plan pour l'adapter à une page Web
Donnez à votre site Web un intérêt visuel avec des graphiques d'arrière-plan
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 d'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 à obtenir 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 la CSS3 propriété, pour taille d'arrière-plan , et mettez-le égal à couverture .
|__+_|
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 fond : 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.