La propriété d’arrière-plan CSS est utilisée pour définir les effets d’arrière-plan sur l’élément. Il y a 5 propriétés de fond CSS qui affectent les éléments HTML:
- Couleur de fond
- image de fond
- Répétition du fond
- pièce jointe
- position de fond
1) Couleur de fond CSS (background-color)
La propriété background-color permet de spécifier la couleur d’arrière-plan de l’élément.
Vous pouvez définir la couleur de fond comme ceci:
<!DOCTYPE html>
<html>
<head>
<style>
h2,p{
background-color: #b0d4de;
}
</style>
</head>
<body>
<h2>Ma première page CSS.</h2>
<p>Bonjour w3tutoriels. Ceci est un exemple de couleur de fond CSS.</p>
</body>
</html>
Résultat :
2) Image de fond CSS (background-image)
La propriété background-image est utilisée pour définir une image en tant qu’arrière-plan d’un élément. Par défaut, l’image couvre tout l’élément. Vous pouvez définir l’image de fond pour une page comme celle-ci.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper1.gif");
margin-left:100px;
}
</style>
</head>
<body>
<h1>Hello w3tutoriels.com</h1>
</body>
</html>
Remarque: l’image d’arrière-plan doit être choisie en fonction de la couleur du texte. La mauvaise combinaison de texte et d’image d’arrière-plan peut être la cause d’une page Web mal conçue et illisible.
3) CSS background-repeat
Par défaut, la propriété background-image répète l’image d’arrière-plan horizontalement et verticalement. Certaines images ne sont répétées qu’horizontalement ou verticalement.
L’arrière-plan est plus beau si l’image ne se répète que horizontalement.
background-repeat: repeat-x;
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("bck_bg.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Hello w3tutoriels.com</h1>
</body>
</html>
background-repeat: repeat-y;
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("bkg_bg.png");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<h1>Hello w3tutoriels.com</h1>
</body>
</html>
4) CSS background-attachment
La propriété background-attachment permet d’indiquer si l’image d’arrière-plan est fixe ou de faire défiler le reste de la page dans la fenêtre du navigateur. Si vous définissez une image d’arrière-plan fixe, l’image ne bougera pas lors du défilement dans le navigateur. Prenons un exemple avec une image de fond fixe.
background: white url('bbb.gif');
background-repeat: no-repeat;
background-attachment: fixed;
5) CSS background-position
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:
- center
- top
- bottom
- left
- right
background: white url('good-morning.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;