Background - Propriété CSS
Résumé des caractéristiques de la propriété background
Per grammar : sérialisation dans l'ordre de la syntaxe. 1Description 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. Un slash introduit la ou les valeurs pour la dimension de l'arrière-plan.
background-image: Définit l'image ou dégradé d'arrière-plan (plusieurs images ou dégradés peuvent coexister).background-position: Définit comment se positionne l'image d'arrière-plan.background-size: Dimensionnement de l'image d'arrière-plan.background-repeat: Définit comment est répétée l'image d'arrière-plan.background-attachment: Mode de défilement de l'image d'arrière-plan.background-origin: Définit une référence pour positionner l'image d'arrière-plan.background-clip: Définit l'étendue de l'arrière-plan, en particulier par rapport à la bordure et aux marges intérieures..background-color: Définit la couleur en arrière-plan.
Vous pouvez vous reportez à ces différentes propriétés pour connaître leur syntaxe exacte.
Valeurs pour background.
- background: url('image.png') bottom left / contain repeat scroll border-box content-box #f04218;
Cette syntaxe est la plus complète de
background. Elle reprend les valeurs de toutes les propriétés qu'elle représente, c'est à dire :- L'image d'arrière plan (
image.png). - La position en XY de cette image (
bottom left). - Après le slash, la taille de l'image (
contain). - Le mode de répétition (
repeat). - Le mode de défilement (
scroll). - La référence pour le positionnement de l'image (
border-box). - L'étendue de l'image : couvre-t-elle les marges intérieures, la bordure, etc. (
content-box). - Enfin la couleur (
#f04218). celle-ci ne sera visible que à travers les parties transparentes de l'image, ou si celle-ci n'est pas trouvée.
Toutes les valeurs, sauf l'image, sont optionnelles : en cas d'omission elles sont fixées à leur valeur initiale.
Reportez-vous aux propriétés détaillées pour avoir plus de précisions sur ces différentes valeurs.
- L'image d'arrière plan (
- 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.
Pour plus de précisions sur les dégradés, reportez-vous aux pages
linear-gradient(),conic-gradient()etradial-gradient()ou aux pages sur les dégradés répétitifs. - background: url('image1.png') ... , url('image2.png') ... yellow;
Cette syntaxe définit deux images d'arrière-plan et une couleur. Une virgule séparer les images avec leurs paramètres. Si les images peuvent être multiples, la couleur, elle, sera la dernière citée et sera unique.
La première image citée est au dessus des autres. Puis viens la deuxième, etc. jusqu'à la couleur qui est derrière toutes les images. Ces images ou dégradés peuvent être simplement superposés, mais ils peuvent aussi être mélangés entre eux. Voir pour cela la propriété
background-blend-mode. - background: url('image.png') center / 40px 40px no-repeat;
Cette syntaxe définit une image d'arrière-plan, centrée, de dimensions 40 pixels par 40 pixels, et qui n'est pas répétée.
- background: initial; background: inherit; background: revert; background: revert-layer; background: revert-rule; background: unset;
Les valeurs communes sont présentées sur ces pages :
initial,inherit,revert,revert-layer,revert-rule,unset.
Règles générales sur les arrière-plans.
Un arrière-plan est composé d'une couleur et/ou d'une ou plusieurs images.
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 exemplebackground-imagecompte 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-repeatdans notre exemple. - Si des propriétés ont des paramètres en plus, ceux-ci seront ignorés.
Dans notre exemple
background-sizea 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-positiondans l'exemple, la navigateur affecte les valeurs en bouclant sur celles qui sont disponibles. Ainsiimage1aura la positionborder-box,image2la positioncontent-box, etimage3sera 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.
Valeurs absentes.
La propriété résumée background 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 initiale 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.
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.
Accéder à la propriété background par programme.
Définir l'arrière-plan avec Javascript.
En Javascript, voici deux syntaxes pour modifier la valeur de background.
let el = document.getElementById('id');
el.style['background'] = "url('img/background-1.png') center / contain repeat red";
// ou
let el = document.getElementById('id');
el.style.background = "url('img/background-1.png') center / contain repeat red";
Avec Javascript, lire la valeur de background.
La propriété doit avoir été affectée directement à l'élément lui-même via son attribut style, et pas en passant par un sélecteur CSS.
let el = document.getElementById('id');
let value = el.style['background'];
// ou
let el = document.getElementById('id');
let value = el.style.background;
Avec Javascript, lire la valeur calculée de background.
La valeur calculée est celle qui résulte de l'évaluation des unités relatives (sauf le pourcentage) et de la prise en compte éventuelle des valeurs héritées. Dans tous les cas, la valeur calculée est toujours définie : c'est la valeur initiale de la propriété.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('background');
Avec JQuery, lire ou modifier la valeur de background.
JQuery est une libraire Javascript. qui autorise souvent des syntaxes plus courtes que Javascript lui même.
// Lire la valeur :
$('#id').prop('background');
// Écrire la valeur :
$('#id').prop('background', "url('img/background-1.png') center / contain repeat red");
$('#id').prop('{background': "url('img/background-1.png') center / contain repeat red"});
Avec JQuery, lire la valeur calculée de background.
let value = $('#id').css('background');
Autres codes.
D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.
Testez vous-même.
Les boutons ci-dessous appliquent la valeur saisie à la propriété background et affichent ensuite soit la valeur telle qu'elle a été appliquée,
soit la valeur calculée. Cette deuxième option peut afficher quelque chose d'assez différent de ce qui a été saisi. Reportez-vous aux propriétés
individuelles pour plus de précisions sur chacune des valeurs.
Compatibilité des navigateurs avec background.
La gestion des arrière-plans, uniques ou multiples ne posent plus de problème avec les navigateurs actuels.
background.Remarques :
(1) Les images SVG apparaissent floues lorsqu'elles sont mises à l'échelle.
Multiples
backgroundNavigateurs 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
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
Ce premier niveau de la spécification CSS décrit le mécanisme des feuilles de styles en cascade. Les auteurs et les lecteurs peuvent ajouter des styles aux documents. Principalement destiné à la mise en forme des documents HTML, CSS permet de définir les couleurs, les polices de caractères, la mise en forme du texte, les espacements (marges), etc. Le langage CSS est d'une compréhension aisée, lisible et facile à rédiger, il utilise les termes courants de la publication de bureau.
ConcernantbackgroundPremière définition de la propriété résuméebackgroundregroupant les valeurs des propriétésbackground-color,background-image,background-repeat,background-attachmentetbackground-position.
17 Novembre 1995Document de travail.
12 Novembre 1996Proposé à la recommandation.
17 Décembre 1996Recommandation.
13 Septembre 2018Ancienne spécification, déclarée obsolète. -
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1
Ce niveau 2 de la spécification décrit le mécanisme des styles en cascade de CSS. Ce langage est utilisé pour formater les documents HTML ou XML. Il prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux dispositifs auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.
ConcernantbackgroundLa propriétébackgroundaccepte la valeurinherit(comme toutes les autres propriétés).04 Novembre 1997Document de travail.24 Mars 1998Proposé à la recommandation.11 Mai 1998Recommandation. -
Module CSS - Arrière-plans et bordures - Niveau 3
Le niveau 3 de la spécification décrit en plus comment positionner le fond par rapport à la zone d'arrière-plan, et comment le découper.
Concernant les bordures, la notion de bordure image est introduite, ainsi que la notion d'arrondi d'angle et d'ombrage de boîte.ConcernantbackgroundPossibilité d'arrière-plans multiples.
La propriété résuméebackgroundpermet de définir également les nouvelles propriétés relatives aux arrière-plans.02 Août 2002Document de travail.
17 Décembre 2009Candidat à la recommandation. -
Module CSS - Arrière-plans et bordures - Niveau 4
Le niveau 4 de la spécification introduit les valeurs logiques, dépendantes du mode d'écriture.
ConcernantbackgroundLa propriété résuméebackgroundintègre maintenant les valeurs dépendantes du mode d'écriture.25 Novembre 2025Document de travail.
Voir aussi, au sujet des arrière-plans.
La spécification du W3C "module CSS - Arrière-plans et bordures" 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.