Propriété CSS background
La propriété CSS background est une propriété raccourcie utilisée pour définir toutes les propriétés de style d’arrière-plan. La propriété background inclut les propriétés suivantes :
- background-color, qui est utilisée pour définir une couleur d’arrière-plan.
- background-image, qui est utilisée pour définir une ou plusieurs images d’arrière-plan pour un élément.
- background-repeat, qui est utilisée pour contrôler la répétition de l’arrière-plan d’un élément.
- background-position, qui est utilisée pour définir la position d’une image d’arrière-plan.
- background-origin, qui est utilisée pour définir la zone de positionnement de l’arrière-plan, c’est-à-dire la position d’une image placée à l’aide de la propriété background-image.
- background-clip, qui est utilisée pour placer l’image ou la couleur d’arrière-plan sous sa bordure.
- background-attachment, qui est utilisée pour définir si l’image d’arrière-plan est fixe ou si elle défile avec le reste de la page.
- background-size, qui est utilisée pour définir la taille de l’image d’arrière-plan.
Si l’une des propriétés de la propriété raccourcie background est background-size, une barre oblique doit être utilisée pour la séparer de background-position.
Lorsque plusieurs sources background-image sont utilisées mais qu’une background-color est également nécessaire, celle-ci doit être placée en dernier dans la liste.
| Initial Value | See individual properties. |
|---|---|
| Applies to | All elements. It also applies to ::first-letter. |
| Inherited | No. |
| Animatable | Yes. Background-color, background-position, and background-size are animatable. |
| Version | CSS1+ new properties in CSS3 |
| DOM Syntax | object.style.background = "blue url(img.jpeg) bottom left repeat"; |
Syntaxe
Syntaxe de la propriété CSS background
background: bg-color bg-image bg-position bg-size bg-repeat bg-origin bg-clip bg-attachment | initial | inherit;Exemple de la propriété background :
Exemple de la propriété CSS background color
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>Exemple de propriété d’arrière-plan</h2>
<p>Ici, la couleur d’arrière-plan est définie sur vert.</p>
</body>
</html>Résultat
Exemple de la propriété background avec une image appliquée :
Exemple de la propriété CSS background image
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: url("https://fr.w3docs.com/uploads/media/default/0001/01/a1d4caa225542c577689287a36f4209808b08c19.jpeg");
}
</style>
</head>
<body>
<h2>Exemple de propriété d’arrière-plan</h2>
<p>Ici, une image d’arrière-plan est utilisée.</p>
</body>
</html>Voir un autre exemple de la propriété background où les valeurs background-color, background-image, background-repeat et background-attachment sont appliquées.
Exemple de la propriété background avec différentes valeurs :
Exemple de la propriété CSS background
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #ccc url("https://fr.w3docs.com/build/images/w3docs-logo-black.png") no-repeat fixed center;
}
</style>
</head>
<body>
<h2>Exemple de propriété d’arrière-plan</h2>
<p>Dans cet exemple, la propriété background spécifie background-color, la propriété background-image pour définir l’image en arrière-plan, background-repeat pour indiquer que l’image ne doit pas être répétée, background-attachment pour indiquer que l’image doit être fixe et background-position pour indiquer que l’image doit être centrée.</p>
</body>
</html>Dans l’exemple suivant, la propriété background-size est utilisée pour spécifier la taille de l’arrière-plan.
Exemple de la propriété background-size :
Exemple de la propriété CSS background-size
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #eee url("https://fr.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg") no-repeat center 100px;
background-size: cover;
}
</style>
</head>
<body>
<h2>Exemple de propriété d’arrière-plan</h2>
<p>Ici, la taille de l’arrière-plan est définie sur cover.</p>
</body>
</html>Ici, la propriété background-clip spécifie jusqu’où l’arrière-plan doit s’étendre à l’intérieur d’un élément.
Exemple de la propriété background-clip :
Exemple de la propriété CSS background-clip
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 8px dotted #ccc;
padding: 25px;
background: #ccc;
background-clip: padding-box;
}
</style>
</head>
<body>
<h2>Exemple de propriété d’arrière-plan</h2>
<div>
<p>Le background-clip de cet élément div est défini sur padding-box.</p>
</div>
</body>
</html>Dans l’exemple suivant, la propriété background-origin est utilisée. Elle permet à l’image d’arrière-plan de commencer depuis le coin supérieur gauche du contenu.
Exemple de la propriété background-origin :
Exemple de la propriété CSS background-origin
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 10px double #ccc;
padding: 25px;
background: url("https://fr.w3docs.com/build/images/w3docs-logo-black.png");
background-repeat: no-repeat;
background-origin: padding-box;
}
</style>
</head>
<body>
<h2>Exemple de propriété d’arrière-plan</h2>
<p>Ici, background-origin: padding-box (par défaut) est défini.</p>
<div></div>
</body>
</html>Valeurs
| Value | Description |
|---|---|
| background-color | Définit la couleur d’arrière-plan. |
| background-image | Définit une ou plusieurs images. |
| background-position | Spécifie la position des images d’arrière-plan. |
| background-size | Définit la taille de l’image d’arrière-plan. |
| background-repeat | Spécifie comment répéter les images d’arrière-plan. |
| background-origin | Spécifie la zone de positionnement des images d’arrière-plan. |
| background-clip | Spécifie la zone de peinture des images d’arrière-plan. |
| background-attachment | Spécifie si l’image est fixe ou non. |
| initial | Définit cette propriété à sa valeur par défaut. |
| inherit | Hérite cette propriété de son élément parent. |
Practice
What are the properties of CSS background?