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 :

1. Couleur de l'arrière plan
2. image de fond
3. Répétition du fond
4. pièce jointe d'arrière-plan
5. 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> 

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; } 

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; 

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 :

1. centre
2. haut
3. bas
4. gauche
5. droite

 background: white url('good-morning.webp'); background-repeat: no-repeat; background-attachment: fixed; background-position: center;