Propriété d'arrière-plan CSS
Exemple
Définissez différentes propriétés d'arrière-plan dans une seule déclaration :
body
{
background: lightblue url("img_tree.gif") no-repeat fixed center;
}
Définition et utilisation
La backgroundpropriété est une propriété abrégée pour :
- Couleur de l'arrière plan
- image de fond
- position d'arrière-plan
- taille d'arrière-plan
- Répétition du fond
- background-origine
- clip d'arrière-plan
- arrière-plan-pièce jointe
Peu importe si l'une des valeurs ci-dessus est manquante, par exemple background:#ff0000 url(smiley.gif); est autorisée.
| Valeur par défaut: | voir les propriétés individuelles |
|---|---|
| Hérité: | non |
| Animable : | oui, voir propriétés individuelles . En savoir plus sur l'animation |
| Version: | CSS1 + nouvelles propriétés en CSS3 |
| Syntaxe JavaScript : | object .style.background="red url(smiley.gif) top left no-repeat" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
| Property | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Remarque : Voir la prise en charge de chaque navigateur pour chaque valeur ci-dessous.
Syntaxe CSS
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
Remarque : Si l'une des propriétés dans la déclaration abrégée est la propriété bg-size, vous devez utiliser un / (barre oblique) pour la séparer de la propriété bg-position, par exemple background:url(smiley.gif) 10px 20px/50px 50px ; se traduira par une image d'arrière-plan, positionnée à 10 pixels de la gauche, 20 pixels du haut, et la taille de l'image sera de 50 pixels de large et 50 pixels de haut.
Remarque : Si vous utilisez plusieurs sources d'image d'arrière-plan mais souhaitez également une couleur d'arrière-plan, le paramètre de couleur d'arrière-plan doit être le dernier de la liste.
Valeurs de propriété
| Value | Description | CSS |
|---|---|---|
| background-color | Specifies the background color to be used | 1 |
| background-image | Specifies ONE or MORE background images to be used | 1 |
| background-position | Specifies the position of the background images | 1 |
| background-size | Specifies the size of the background images | 3 |
| background-repeat | Specifies how to repeat the background images | 1 |
| background-origin | Specifies the positioning area of the background images | 3 |
| background-clip | Specifies the painting area of the background images | 3 |
| background-attachment | Specifies whether the background images are fixed or scrolls with the rest of the page | 1 |
| initial | Sets this property to its default value. Read about initial | 3 |
| inherit | Inherits this property from its parent element. Read about inherit | 2 |
Pages connexes
Tutoriel CSS : Arrière -plan CSS , Arrière- plans CSS (avancé)
Référence HTML DOM : propriété background