w3tutoriels.com

CSS Background

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:

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:

  1. center
  2. top
  3. bottom
  4. left
  5. right
background: white url('good-morning.jpg');  
background-repeat: no-repeat;  
background-attachment: fixed;  
background-position: center;
Quitter la version mobile