Raccourci d'arrière-plan CSS
Arrière-plan CSS - Propriété abrégée
Pour raccourcir le code, il est également possible de spécifier toutes les propriétés du fond dans une seule propriété. C'est ce qu'on appelle une propriété abrégée.
Au lieu d'écrire :
body {
background-color: #ffffff;
background-image:
url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Vous pouvez utiliser la propriété abrégée background
:
Exemple
Utilisez la propriété raccourcie pour définir les propriétés d'arrière-plan dans une seule déclaration :
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
Lors de l'utilisation de la propriété abrégée, l'ordre des valeurs de propriété est :
background-color
background-image
background-repeat
background-attachment
background-position
Peu importe si l'une des valeurs de propriété est manquante, tant que les autres sont dans cet ordre. Notez que nous n'utilisons pas la propriété background-attachment dans les exemples ci-dessus, car elle n'a pas de valeur.
Toutes les propriétés d'arrière-plan CSS
Property | Description |
---|---|
background | Sets all the background properties in one declaration |
background-attachment | Sets whether a background image is fixed or scrolls with the rest of the page |
background-clip | Specifies the painting area of the background |
background-color | Sets the background color of an element |
background-image | Sets the background image for an element |
background-origin | Specifies where the background image(s) is/are positioned |
background-position | Sets the starting position of a background image |
background-repeat | Sets how a background image will be repeated |
background-size | Specifies the size of the background image(s) |