Background - Propriété CSS

background

Résumé des caractéristiques de la propriété `background`

Description rapide

Résumé des propriétés de l'arrière-plan.

Statut

Standard

Utilisable sur

HTML

Pourcentages

Reportez-vous aux propriétés individuelles.

Valeur initiale

Voir les propriétés individuelles.

Héritée par défaut

Non.

Type d'animation

Voir les propriétés individuelles.

Module W3C

Module CSS - Arrière-plans et bordures

Références (W3C)

🡇

🡅

CSS Backgrounds and Borders Module Level 3

Statut du document: CR (document candidat à la recommandation)

Cascading Style Sheets Level 2 - Revision 1 Specification

Statut du document: REC (recommandation)

Cascading Style Sheets specification - Version 1

Statut du document: DEPR (Ancienne spécification, déclarée obsolète)

Description de la 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.

background est une propriété résumée, 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.

Valeurs pour `background`.

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, ou si l'image n'est pas trouvée.
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('image.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, ou si l'image n'est pas trouvée.
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).
background: initial; background: inherit; background: revert; background: revertLayer; background: unset;

Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

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 si l'image n'est pas trouvée, 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é. Six fonctions permettent de définir un dégradé : conic-gradient(), linear-gradient(), radial-gradient() et leurs variantes en dégradé répétitif.

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. Sur l'image background-2.png toutes les parties non bleues sont transparentes.

background-1.png

background-2.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 exemple background-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. Ainsi image1 aura la position border-box, image2 la position content-box, et image3 sera positionnée sur border-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é résumée.

La propriété résumée 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 d'utilisation de la propriété `background`.

Cliquez sur les boutons pour afficher les codes CSS.

Arrière-plan défini d'après une couleur

Arrière-plan défini par une image.

Arrière-plan défini par une image ET une couleur.
Cette dernière sera visible si l'image est introuvable ou si elle comporte des paries transparentes.

Arrière-plan défini par une image,
avec précision sur le positionnement de celle-ci et sur sa répétition.

Arrière-plan défini par un dégradé
Voir la fonction linear-gradient().

Compatibilité des navigateurs avec `background`.

La gestion des arrière-plans, uniques ou multiples ne posent plus de problème avec les navigateurs actuels.

Colonne 1

Support des arrière-plans multiples.

Colonne 2

Suport de la propriété raccourcie background.

Colonne 3

Support des images SVG utilisées en arrière-plan d'un élément.

Remarques :

(1) Les images SVG apparaissent floues lorsqu'elles sont mises à l'échelle.

Arrière-plans
Multiples

Porpriété
background

SVG

Estimation de la prise en charge globale.

97%

96%

98%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété `background`.

La propriété résumée background évolue pour suivre les nouvelles possibilités des arrière-plans introduites par la spécification niveau 3. Principalement les arrière-plans multiples, mais aussi l'ajout de nouvelles caractéristiques des arrière-plans : les dimensions (background-size), l'origine (background-origin, et la découpe éventuelle background-clip.

CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1

Première définition de la propriété résumée background regroupant les valeurs des propriétés background-color, background-image, background-repeat, background-attachment et background-position.

17 Novembre 1995
Document de travail.
12 Novembre 1996
Proposé à la recommandation.
17 Décembre 1996
Recommandation.
13 Septembre 2018
Ancienne spécification, déclarée obsolète.
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

La propriété background accepte la valeur inherit (comme toutes les autres propriétés).

04 Novembre 1997
Document de travail.
24 Mars 1998
Proposé à la recommandation.
11 Mai 1998
Recommandation.
Module CSS - Arrière-plans et bordures - Niveau 3

Possibilité d'arrière-plans multiples.
La propriété résumée background permet de définir également les nouvelles propriétés relatives aux arrière-plans.

02 Août 2002
Document de travail.
17 Décembre 2009
Candidat à la recommandation.

Voir aussi, au sujet des arrière-plans.

La spécification du W3C "CSS Backgrounds and Borders Module" regroupe tout ce qui concerne les bordures et les arrière-plans. Pour faciliter vos recherches, nous listons ci-dessous les principales propriétés en rapport.