La propriété CSS qui contrôle l’apparence de l’arrière-plan d’un élément est appelée en anglais « background ». Par exemple, pour définir l’arrière-plan du corps d’une page, vous pouvez utiliser le code suivant :
body {
background: #90d500 url(« image.webp ») no-repeat center center fixed;
/* Si le format WebP n’est pas supporté, une image de secours au format JPG est utilisée */
background-image: url(« image.jpg »);
}
Cette propriété comporte plusieurs valeurs importantes à prendre en compte. Premièrement, la couleur de fond est définie en utilisant un code hexadécimal abrégé. Ensuite, l’image de fond doit être optimisée en termes de taille et de compression pour assurer des temps de chargement rapides de la page. Il est recommandé de limiter la répétition de l’image de fond en utilisant « background-repeat: no-repeat », ce qui contribue à améliorer les performances globales de la page.
Pour positionner l’image de fond de manière centrale, peu importe la taille de l’écran, on utilise « background-position: center center ». Enfin, pour que l’image de fond reste fixe en arrière-plan et ne défile pas avec le contenu lorsque l’utilisateur parcourt la page, on applique « background-attachment: fixed ». Cette fixation de l’image crée un effet visuel intéressant tout en maintenant la stabilité de l’arrière-plan pendant le défilement.
Retour à l'index du glossaire