Tutoriel sur la taille de l'image d'arrière-plan CSS - Comment coder une image d'arrière-plan pleine page

Ce didacticiel vous montrera un moyen simple de coder une image d'arrière-plan d'une page entière en utilisant CSS. Et vous apprendrez également à adapter cette image à la taille de l'écran de vos utilisateurs.

Faire une image d'arrière-plan complètement étirée pour couvrir toute la fenêtre du navigateur est une tâche courante dans la conception Web. Heureusement, cette tâche peut être prise en charge avec quelques lignes de CSS.

Fenêtre de couverture avec image

Tout d'abord, nous voudrons nous assurer que notre page couvre réellement la totalité de la fenêtre d'affichage:

html { min-height: 100%; }

À l'intérieur html, nous utiliserons la background-imagepropriété pour définir l'image:

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

La magie de la propriété 'Background-Size'

La magie opère avec la background-sizepropriété:

background-size: cover;

coverindique au navigateur de s'assurer que l'image couvre toujours tout le conteneur, dans ce cas html. Le navigateur couvrira le conteneur même s'il doit étirer l'image ou couper un peu les bords.

Étant donné que le navigateur peut étirer l'image, vous devez utiliser une image d'arrière-plan d'une résolution suffisamment élevée. Sinon, l'image peut apparaître pixélisée.

Si vous souhaitez que toute l'image apparaisse en arrière-plan, vous voudrez vous assurer que le rapport hauteur / largeur de l'image est relativement proche par rapport à la taille de l'écran.

Comment affiner une position d'image et éviter la mosaïque

Le navigateur peut également choisir d'afficher votre image d'arrière-plan sous forme de tuiles en fonction de sa taille. Pour éviter que cela ne se produise, utilisez no-repeat:

background-repeat: no-repeat;

Pour garder les choses jolies, nous garderons notre image toujours centrée:

background-position: center center;

Cela centrera l'image à la fois horizontalement et verticalement à tout moment.

Nous avons maintenant produit une image entièrement responsive qui couvrira toujours tout le fond:

html { min-height: 100%; background-image: url(image.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; } 

Comment réparer une image en place lors du défilement

Maintenant, juste au cas où vous voudriez ajouter du texte au-dessus de l'image d'arrière-plan et que le texte déborde la fenêtre actuelle, vous voudrez peut-être vous assurer que votre image reste en arrière-plan lorsque l'utilisateur fait défiler vers le bas pour voir le reste du texte:

background-attachment: fixed;

Vous pouvez inclure toutes les propriétés d'arrière-plan décrites ci-dessus en utilisant une notation courte:

background: url(image.jpg) center center cover no-repeat fixed;

Facultatif: Comment ajouter une requête multimédia pour mobile

Pour ajouter une cerise sur le gâteau, vous souhaiterez peut-être ajouter une requête multimédia pour les petits écrans:

@media only screen and (max-width: 767px) { html { background-image: url(smaller-image.jpg); } } 

Vous pouvez utiliser Photoshop ou un autre logiciel d'édition d'image pour réduire la taille de votre image d'origine afin d'améliorer la vitesse de chargement des pages sur les connexions Internet mobiles.

Alors maintenant que vous connaissez la magie de la création d'un arrière-plan d'image pleine page réactif, il est temps d'aller créer de beaux sites Web!

Vous voulez voir plus de conseils et de connaissances sur le développement Web?

  • Abonnez-vous à ma newsletter hebdomadaire
  • Visitez mon blog à 1000 Mile World
  • Suis moi sur Twitter