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é : les couleurs nomées.#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().
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.
Reportez-vous à la page background pour une explication sur le fonctionnement général des arrière-plans.
Syntaxes pour background-color.
- background-color: transparent;
Valeur par défaut.
- background-color: lavender;
Dans cet exemple, la couleur est désignée par son nom. Voir les couleurs nomées.
- background-color: #421824; background-color: rgb(48 128 45);
La couleur peut être écrite sous toutes les formes reconnues par CSS (voir les couleurs CSS).
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.
Exemples.
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 valeur de background-color 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).
function setBackgroundColor(el) {
el.style.backgroundColor='#f00';
}
function setBackgroundColor(el) {
el.style['background-color']='#f00';
}
Lire en Javascript la valeur de background-color.
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...).
function getBackgroundColor(el) {
return el.style.backgroundColor;
}
function getBackgroundColor(el) {
return el.style['background-color'];
}
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.
function getBackgroundColor(el) {
return window.getComputedStyle(el).getPropertyValue('background-color');
}
Modifier la valeur de la propriété background-color avec JQuery.
Avec JQuery, voici comment modifier la valeur de la propriété background-color pour l'élément el :
function setBackgroundColor(el) {
$(el).css('backgroundColor','#f00');
}
function getBackgroundColor(el) {
$(el).css('background-color','#f00');
}
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.
function setBackgroundColor(el) {
return $(el).css('backgroundColor');
}
function getBackgroundColor(el) {
return $(el).css('background-color');
}
Simulateur.
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-colorNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
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.
-
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.