CSS - Propriété background
background
est une propriété du langage CSS, qui définit l'ensemble des paramètres des
arrière-plans. Ces derniers pouvant être constitués d'une simple couleur, d'une image, d'un dégradé,
ou d'une combinaison de plusieurs de ces couches.
Description de la propriété background
.
background
est une propriété raccourcie, qui regroupe plusieurs propriétés définissant
l'arrière-plan. Les valeurs sont séparées par des espaces.
L'ordre des valeurs n'a pas trop d'importance car les valeurs possibles sont différentes d'une
propriété à l'autre, sauf en ce qui concerne background-position
et background-clip
qui doivent être citées dans cet ordre.
background-image
: définit une image ou un dégradé pour l'arrière-plan.background-position
: définit la position de l'image d'arrière-plan.background-size
: définit la taille de l'image d'arrière-plan.background-repeat
: définit si l'image d'arrière-plan est affichée une seule fois ou répétée jusqu'à couvrir toute la surface de l'élément.background-attachment
: définit si l'image d'arrière-plan va défiler avec le contenu, avec la page ou rester fixe.background-origin
: définit le point de référence pour le positionnement de l'arrière-plan.background-clip
: définit jusqu'où doit s'étendre l'arrière-plan : uniquement sous le contenu, jusque sous la bordure, etc.background-color
: définit une couleur unie pour l'arrière-plan.
Exemples de syntaxe.
background: url('image.png') #f04218;
Cette syntaxe définit une image de fond et une couleur. Cette dernière ne sera visible que si l'image comporte des parties transparentes.
background: linear-gradient(90deg,transparent,blue) #f04218;
Cette syntaxe définit un dégradé (à la place d'une image) et une couleur. Cette dernière sera visible puisque le dégradé comporte une partie transparente.
background: url('imgage.png') no-repeat fuchsia;
Cette syntaxe définit un arrière-plan comportant une image unique (non répétée) et une couleur. Cette dernière sera visible autour de l'image si celle-ci est plus petite que l'élément, et bien sûr à travers les parties transparentes de l'image.
background: url('image.png') content-box;
Cette syntaxe définit un arrière-plan avec une image, et limité à la zone du contenu (l'arrière-plan ne s'étend pas sous les marges intérieures, ni sous les bordures). D'autre part, le positionnement de cette image se fera également par rapport à la zone de contenu.
Lorsqu'une seule valeur...box
est présente une seule fois, elle s'applique aussi bien à la position de l'arrière plan (background-origin
) qu'à son découpage (background-clip
).background: url('image.png') content-box border-box;
Cette syntaxe définit un arrière-plan avec une image, positionné par rapport à la zone de contenu, et qui s'étend jusqu'à la bordure.
Lorsque deux valeurs...box
sont présentes, la première s'applique à la position de l'arrière-plan (background-origin
) et la deuxième à son découpage (background-clip
).-
Reportez-vous à la description générale de ces valeurs.
Règles générales sur les arrière-plans.
Un arrière-plan est composé d'une couleur et/ou d'une image.
Si les deux sont définies, la couleur et positionnée en dessous de l'image :
elle sera visible dans les parties transparentes de l'image, ou à coté de l'image si celle-ci
est plus petite que l'élément et qu'elle n'est pas répétée.
La couleur peut également être mélangée avec l'image (voir background-blend-mode
).
Exemple : l'arrière-plan de l'élément ci-dessous est composé d'une couleur (lightblue) et d'une image (un cercle blanc avec de la transparence autour).
L'image peut être remplacée par un dégradé. Trois fonctions permettent de définir un dégradé :
conic-gradient()
, linear-gradient()
et radial-gradient()
.
Arrière-plans multiples.
Principe.
Il est possible de définir plusieurs arrière-plans pour un même élément. Ces arrière-plans se superposent dans l'ordre de leur déclaration, le premier cité au dessus. Les arrière-plans suivants ne sont donc pas visibles, sauf dans les cas suivants :
- Une ou plusieurs des première images n'ont pas été trouvées.
- Les premières images comportent des zones transparentes.
- On a prévu un mélange entre les différents arrière-plan avec la propriété
background-blend-mode
.
Chacune des propriétés relatives aux arrière-plans peut alors comporter une série de valeurs séparées par des virgules, chacune de ces valeurs correspondant à un des arrière-plans.
La propriété background-color
fait cependant exception : une seule couleur de fond
peut être définie, avec le dernier arrière-plan. Elle sera commune à tous les arrière-plans.
Voici un exemple de deux arrière-plans construits avec les images ci-dessous.
![]() |
![]() |
background-1.png | background-3.png |
Nombres de valeurs différents.
Comment le navigateur va-t-il procéder si le nombre de valeurs est différent d'une propriété
à l'autre ?
Dans notre exemple ci-dessous, background-image
comporte trois valeurs, tandis que
background-size
en comporte quatre, et que background-position
n'en comporte que deux.
background-image: url('image1.png'),
url('image2.png'),
linear-gradient(0,blue,lightblue);
background-repeat:
repeat,
repeat,
no-repeat,
background-size:
contain,
cover,
cover,
contain;
background-position:
border-box,
content-box;
Voici les règles :
- La propriété qui sert de référence pour dénombrer les arrière-plans est
background-image
. Dans notre exemplebackground-image
compte 3 valeurs. - Si les autres propriétés ont un nombre de valeurs identique, les choses sont simples :
on affecte chacune des valeurs à l'arrière-plan correspondant.
C'est le cas de
background-repeat
dans notre exemple. - Si des propriétés ont des paramètres en plus, ceux-ci seront ignorés.
Dans notre exemple
background-size
a quatre valeurs. La dernière ne sera affectée à aucun des arrière-plan : elle sera ignorée. - Enfin, dans le cas ou des propriétés ont moins de valeurs, comme
background-position
dans l'exemple, la navigateur affecte les valeurs en bouclant sur celles qui sont disponibles. Ainsiimage1
aura la positionborder-box
,image2
la positioncontent-box
, etimage3
sera positionnée surborder-box
(on est revenu sur la première valeur).
La conséquence est que si une seule valeur est définie pour une des propriétés, elle s'appliquera à tous les arrière-plans.
Remarque : Le fait de définir une couleur et une image ne crée par deux arrière-plans.
Propriété raccourcie.
La propriété raccourcie background
ne permet pas ce genre de fonctionnement,
car elle définit toutes les valeurs : quand une valeur n'est pas précisée, elle est fixée à sa
valeur par défaut.
On a donc toujours le même nombre de valeurs pour chacun des paramètres d'arrière-plan.
Dans l'exemple ci-dessous, image2
et image3
seront répétées
(la valeur par défaut pour background-repeat
est repeat
).
background:
url('image1.png') no-repeat,
url('image2.png'),
url('image3.png');
Exemples.
Cliquez sur les exemples pour afficher leur code CSS.
Arrière-plan défini d'après une couleur
Arrière-plan défini par une image.
Cette dernière sera visible si l'image est introuvable ou si elle comporte des paries transparentes.
avec précision sur le positionnement de celle-ci et sur sa répétition.
Voir la fonction
linear-gradient()
.
Voir aussi...
Arrière-plan - Propriétés.
background-attachment
: Mode de défilement de l'image d'arrière-plan.background-blend-mode
: Définit le mélange des couleurs entre image(s) d'arrière-plan et couleur d'arrière-plan.background-clip
: Interaction entre arrière-plan et bordure.background-color
: Définit la couleur de l'arrière-plan.background-image
: Image d'arrière-plan.background-origin
: Position de l'image d'arrière-plan.background-position
: Emplacement de l'image d'arrière-plan.background-repeat
: Mode de répétition de l'image d'arrière-plan.background-size
: Dimensionnement de l'image d'arrière-plan.isolation
: Gère l'interaction entre les couches.mix-blend-mode
: Définit le mode de mélange entre le contenu et ce qui est visible en arrière-plan de l'élément.opacity
: Opacité (ou transparence).
Arrière-plan - Fonctions.
conic-gradient()
: Définit un dégradé de couleurs conique.linear-gradient()
: Détermine un dégradé de couleur linéaire.radial-gradient()
: Détermine un dégradé de couleur radial (depuis le centre vers les bords).repeating-conic-gradient()
: Définit un dégradé de couleurs conique, avec répétitionrepeating-linear-gradient()
: Détermine un dégradé de couleur linéaire avec répétition.repeating-radial-gradient()
: Détermine un dégradé de couleur radial avec répétition.