Background-color - Propriété CSS
Résumé des caractéristiques de la propriété background-color
transparent | currentcolortransparentbackground-color passe progressivement d'une valeur à une autre.Schéma syntaxique de background-color.
Sur ce schéma figurent toutes les façons de spécifier une couleur en CSS :
color-nameest le nom d'une couleur. De nombreuses couleurs ont reçu un nom standardisé : voir le Nuancier.#xxxxxxest le code hexadécimal de la couleur, le plus souvent sur 6 digits, mais la syntaxe accepte un code sur 3 ou 8 digits.colorest une couleur spécifiée par l'une des fonctions suivantes :rgb()ourgba(),hsl()ouhsla(),hwb(),lab(),oklab(),lch(),oklch(),color(),color-mix().
Description de la propriété background-color.
background-color définit la couleur de l'arrière-plan. Si une ou plusieurs images d'arrière-plan
sont également définies (avec la propriété background-image, elle sont prioritaires sur la couleur,
mais cette dernière peut cependant être visible à travers les parties transparentes des images d'arrière-plan.
La couleur peut également être mélangée avec les images d'arrière-plan avec la propriété background-blend-mode.
Dans le cas d'arrière-plan multiples (voir la page background), la couleur reste cependant unique, et ne peut pas
être définie pour chacune des images d'arrière-plan : la couleur est positionnée en dessous de toutes les images d'arrière-plan.
Enfin, la couleur d'arrière-plan peut ne couvrir que la zone de contenu, les marge intérieures, etc. en fonction de la valeur affectée à la propriété
background-clip.
Reportez-vous à la page background pour une explication sur le fonctionnement général des arrière-plans.
Valeurs pour background-color.
- background-color: transparent;
Valeur par défaut.
none - background-color: lavender;
Dans cet exemple, la couleur est désignée par son nom. Voir Nuancier.
lavender - background-color: #42A824; background-color: rgb(48 128 45);
La couleur peut être écrite sous toutes les formes reconnues par CSS (voir Les couleurs).
#421824rgb(48 128 45)hsl(45deg 50% 50%)
Valeurs globales
(communes à toutes les propriétés)
background-color: initial (transparent)
background-color: inherit
background-color: revert
background-color: revertLayer
background-color: unset
Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.
Animation de la propriété background-color.
Les codes de couleur étant des valeurs numériques, background-color se prête très bien aux animations.
Même lorsque la couleur est spécifiée par son nom (red, cyan, etc.) le navigateur effectue la
conversion dans le code numérique correspondant.
La spécification des couleurs avec la fonction hsl() est parfois plus pratique car elle permet par exemple de
garder une teinte fixe tout en ne faisant varier que la luminosité.
Manipulation de la propriété background-color par programme.
Modifier la couleur de l'arrière-plan en Javascript.
Voici deux exemples de codes Javascript pour modifier la valeur de background-color pour un élément el.
On voit que Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case (un tiret pour séparer les mots),
et une autre syntaxe avec la notation en camel-case, plus courante en Javascript (une majuscule pour séparer les mots).
let el = document.getElementById('id');
el.style['background-color'] = 'silver';
// ou
let el = document.getElementById('id');
el.style.backgroundColor = 'silver';
Lire la couleur de l'arrière-plan.
Voici un exemple de code pour lire, avec Javascript, la valeur de background-color. La propriété doit être affectée directement
à l'élément lui-même via son attribut style, et non pas en CSS via un sélecteur.
La couleur est renvoyée sous son nom s'il s'agit d'une couleur nommée, ou sous la forme rgb(r,g,b) ou rgba(r,g,b,a)
si elle a été définie autrement que par son nom (code hexadécimal, notation HSL, etc...).
let el = document.getElementById('id');
let value = el.style['background-color'];
// ou
let el = document.getElementById('id');
let value = el.style.backgroundColor;
Lire la valeur calculée de background-color en Javascript.
Voici comment lire avec Javascript la valeur calculée de background-color. La couleur est retournée sous la forme
rgb(r,g,b), ou rgba(r,g,b,a) si l'opacité n'est pas totale.
let value = $('#id').css('background-color');
Modifier la couleur d'arrière-plan avec JQuery.
Avec JQuery, voici comment modifier la valeur de la propriété background-color pour l'élément el :
let el = document.getElementById('id');
el.style['background-color'] = 'silver';
// ou
let el = document.getElementById('id');
el.style.backgroundColor = 'silver';
Lire la valeur calculée de la propriété background-color avec JQuery.
Lire avec JQuery la valeur calculée de la propriété background-color peut se faire avec les codes suivants.
Comme en Javascript, la couleur est retournée sous la forme rgb(r,g,b) ou rgba(r,g,b,a) si la couleur n'est
pas totalement opaque.
let value = $('#id').css('background-color');
Testez vous-même.
Les boutons ci-dessous appliquent la valeur saisie à la propriété background-color et affichent ensuite soit la valeur telle qu'elle a été appliquée,
soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de background-color. On constate en particulier
que les couleurs sont toujours mémorisées sous la forme rgb().
Exemple interactif avec la propriété background-color.
Compatibilité entre navigateurs.
Aucun problème de compatibilité n'est à signaler : tous les navigateurs prennent depuis longtemps en charge la propriété background-color.
background-color pour définir la couleur de l'arrière-plan (en plus des images).background-colorNavigateurs 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
Historique de la propriété background-color.
La définition initiale de background-color remonte à la toute première spécification du langage CSS. Elle a peu évolué depuis.
Mais les manières de spécifier les couleurs ont elles beaucoup évoluées.
-
CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1
Première spécification du langage CSS.
Définition initiale de la prorpriétébackground-color.
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
Ajout de la valeurinheritpermettant de forcer la propriété à la valeur héritée du parent.04 Novembre 1997Document de travail.24 Mars 1998Proposé à la recommandation.11 Mai 1998Recommandation. -
Module CSS - Arrière-plans et bordures - Niveau 3
Pas de changement dans la définition debackground-coloren elle-même, mais de nombreuses nouveautés concernant la gestion des couleurs (voir le menu "Autres références CSS/Les couleurs CSS".02 Août 2002Document de travail.
17 Décembre 2009Candidat à 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. Ci-dessous, la liste des propriétés en rapport.