Trouver comment intégrer efficacement une image de fond en CSS peut être compliqué pour beaucoup.
Une mauvaise utilisation peut entraîner des pages peu attrayantes et des frustrations dans la mise en page.
Cet article vous guide à travers l’utilisation de la propriété background-image, pour améliorer visuellement vos pages web.
Lancez votre carrière de développeur web avec une formation pratique.
Introduction
L’image de fond en CSS est une fonctionnalité très utilisable en développement web. Elle apporte une valeur ajoutée à la conception d’une page ou d’un élément textuel en plaçant une image sur le fond de celui ou de celle-ci. En CSS, cela se fait surtout à l’aide de la propriété background-image.
Tous les éléments HTML peuvent avoir une image de fond. Si la propriété CSS background-image est attribuée à la balise « body », par exemple, l’image constitue l’arrière-plan de la page web toute entière ; pour faire apparaître l’image en arrière-plan du pied-de-page, d’un conteneur d’éléments ou encore d’un titre de premier niveau, la propriété est attribuée respectivement aux éléments HTML « footer », « div » ou « h1 ».
Syntaxe de l'image de fond CSS
La propriété background-image permet de définir une image comme arrière-plan d’un élément HTML. Pour mettre une image en background avec CSS, il faut renseigner le code suivant :
background-image: url(« chemin/vers/image.jpg »).
La valeur de l’URL, entre les guillemets, indique l’emplacement de l’image. Il peut s’agir d’une URL absolue si l’image est en ligne, ou d’une URL relative si l’image est enregistrée dans un fichier.
Gérer background-repeat CSS efficacement
Pour que l’image constitue l’arrière-plan de la page toute entière, par exemple, la syntaxe est la suivante : body { background-image: url(« chemin/vers/image.jpg « ) }
Exemple :
body{
background-image: url(image.png);
}
Remarquez que par défaut l’image de fond est répétée de facon à occuper tout l’espace disponible en function de sa taille. Vous pouvez modifier ceci avec une autre propriété background-repeat .
Cette propriété peut prendre plusieurs valeurs :
- No-repeat :pour désactiver la repetition .
body{
background-image: url(image.png);
background-repeat: no-repeat;
}
Il y’a également d’autres valeurs possible :
- repeat :Répète l’image horizontalement et verticalement (valeur par défaut).
- repeat-x :Répète uniquement horizontalement.
- repeat-y :Répète uniquement verticalement.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment appliquer une image de fond à un élément HTML spécifique ?
Comment empêcher la répétition d'une image de fond en CSS ?
Quelle est la syntaxe pour définir une image de fond en CSS ?
Comment faire répéter une image de fond uniquement horizontalement ?
Comment utiliser une URL relative pour une image de fond en CSS ?
Conclusion
L’utilisation de l’image de fond en CSS offre une flexibilité incroyable dans la conception web. Quelles autres techniques CSS utilisez-vous pour améliorer vos designs ?
