Propriété CSS background
La propriété CSS background est une propriété raccourcie, qui permet de définir toutes les propriétés de style de fond. La propriété background comprend les propriétés suivantes :
- background-color
- background-image
- background-repeat
- background-position
- background-origin
- background-clip
- background-attachment
- background-size
La propriété background-color est utilisée quand on veut changer la couleur de quelques tags background.
La propriété background-image définit une ou plusieurs image du fond pour un élément.
Avec la propriété background-repeat on peut contrôler la position répétée d'un élément.
On utilise la propriété background-position pour la position de l'image du fond.
La propriété background-origin définit la zone de placement de fond qui est la position d'une image placée en utilisant la propriété background-image.
La propriété background-clip est utilisée pour placer l'image du fond ou couleur en dessous de sa bordure.
La propriété background-attachment définit si l'image du fond est fixée ou elle fera défiler avec le reste de la page.
La propriété background-size est utilisée pour définir la taille de l'image du fond.
| Valeur initiale | Voyez les propriétés individuelles. |
| Appliquée à | Tous les éléments. Elle est appliquée aussi à ::first-letter. |
| Héritée | Non. |
| Animable | Oui. Background-color, background-position, et background-size sont animables. |
| Version | CSS1+ nouvelles propriétés en CSS3 |
| Syntaxe DOM | object.style.background = "blue url(img.jpeg) bottom left repeat"; |
Syntaxe
background: bg-color bg-image bg-position bg-size bg-repeat bg-origin bg-clip bg-attachment | initial | inherit;Exemple
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>Exemple de la propriété background</h2>
<p>Ici la couleur de fond est définie comme verte.</p>
</body>
</html>Voici un autre exemple, où une image est appliquée à la propriété background.
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: url("/uploads/media/default/0001/01/a1d4caa225542c577689287a36f4209808b08c19.jpeg");
}
</style>
</head>
<body>
<h2>Exemple de la propriété background</h2>
<p>Ici on a utilisée une image du fond.</p>
</body>
</html>Voyons un autre exemple avec la propriété background, òu les valeurs background-color, background-image, background-repeat et background-attachment sont appliquées.
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #ccc url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat fixed center;
}
</style>
</head>
<body>
<h2>Exemple de la propriété background</h2>
<p>Dans cet exemple, la propriété background spécifie background-color, la propriété background-image pour définir une image pour le fond, background-repeat pour spécifier que l'image ne soit pas répétée, background-attachment pour spécifier si l'image est fixée et background-position pour spécifier que l'image était au centre.</p>
</body>
</html>Un autre exemple avec la propriété background-size, qui est définie pour spécifier la taille du fond.
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #eee url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg") no-repeat center 100px;
}
</style>
</head>
<body>
<h2>Exemple de la propriété background</h2>
<p>Ici la dimension de l'espace de fond est définie comme 100px.</p>
</body>
</html>Exemple avec background-clip. Elle spécifie que loin le fond doit prolonger dans un élément.
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 8px dotted #ccc;
padding: 25px;
background: #ccc;
background-clip: padding-box;
}
</style>
</head>
<body>
<h2>Exemple de la propriété background</h2>
<div>
<p>Le background-clip pour cet élément div est défini à padding-box.</p>
</div>
</body>
</html>Voici un autre exemple, où la propriété background-origin est utilisée. Elle permet l'image du fond de commencer du coin supérieur gauche du contenu.
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 10px double #ccc;
padding: 25px;
background: url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png");
background-repeat: no-repeat;
background-origin: padding-box;
}
</style>
</head>
<body>
<h2>Exemple de la propriété background</h2>
<p>Ici background-origin: padding-box (par défaut) est défini.</p>
<div></div>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| background-color | Définit la couleur du fond. |
| background-image | Définit une ou plusieurs images. |
| background-position | Spécifie le placement des images du fond. |
| background-size | Définit la dimension de l'image du fond. |
| background-repeat | Spécifie comment répéter les images du fond. |
| background-origin | Spécifie la zone de placement des images du fond. |
| background-clip | Spécifie la zone pour dessiner des images du fond. |
| background-attachment | Spécifie si l'image est fixée ou non. |
| initial | Fait utiliser la valeur initiale. |
| inherit | Hérite la propriété de l'élément parent. |
Support de Navigateurs
|
|
|
|
|---|---|---|---|
| 1.0+ | 1.0+ | 1.0+ | 3.5+ |
Pratiquez vos connaissances
