La propriété CSS background est utilisée pour définir les effets d’arrière-plan sur l’élément. Il existe 5 propriétés d'arrière-plan CSS qui affectent les éléments HTML :
- Couleur de l'arrière plan
- image de fond
- Répétition du fond
- pièce jointe d'arrière-plan
- position d'arrière-plan
1) Couleur d'arrière-plan CSS
La propriété background-color est utilisée pour spécifier la couleur d'arrière-plan de l'élément.
Vous pouvez définir la couleur d'arrière-plan comme ceci :
h2,p{ background-color: #b0d4de; } <h2>My first CSS page.</h2> <p>Hello Javatpoint. This is an example of CSS background-color.</p> Testez-le maintenant Sortir:
Ma première page CSS.
Bonjour Javatpoint. Ceci est un exemple de couleur d'arrière-plan CSS.
2) Image d'arrière-plan CSS
La propriété background-image est utilisée pour définir une image comme arrière-plan d'un élément. Par défaut, l'image couvre la totalité de l'élément. Vous pouvez définir l'image d'arrière-plan d'une page comme celle-ci.
body { background-image: url('paper1.webp'); margin-left:100px; } Testez-le maintenant 4) Pièce jointe en arrière-plan CSS
La propriété background-attachment est utilisée pour spécifier si l'image d'arrière-plan est fixe ou défile avec le reste de la page dans la fenêtre du navigateur. Si vous fixez l'image d'arrière-plan, l'image ne bougera pas pendant le défilement dans le navigateur. Prenons un exemple avec une image d'arrière-plan fixe.
background: white url('bbb.webp'); background-repeat: no-repeat; background-attachment: fixed;Testez-le maintenant
5) Position d'arrière-plan CSS
La propriété background-position est utilisée pour définir la position initiale de l'image d'arrière-plan. Par défaut, l'image d'arrière-plan est placée en haut à gauche de la page Web.
Vous pouvez définir les positions suivantes :
- centre
- haut
- bas
- gauche
- droite
background: white url('good-morning.webp'); background-repeat: no-repeat; background-attachment: fixed; background-position: center;Testez-le maintenant