Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

background-color - Propriété CSS

background-color

Résumé des caractéristiques de la propriété background-color

Description rapide
Définit la couleur de l'arrière-plan.
Statut
Standard
Type de valeur
Couleur
Valeurs prédéfinies
transparent | currentcolor
Pourcentages
Ne s'appliquent pas.
Valeur initiale
transparent
Héritée par défaut
Non
Type d'animation
Computed value : lors d'une animation, la propriété background-color passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Arrière-plans et bordures
Références (W3C)
Statut du document:: CRD (document proposé pour la recommandation)

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: #421824;

    La couleur peut être écrite sous toutes les formes reconnues par CSS (voir les couleurs CSS).

  • background-color: initial; background-color: inherit; background-color: revert; background-color: revert-layer; background-color: unset;

    La valeur initiale est : transparent.

Exemples.

background-color:gold
background-color:#FFD700
background-color:rgb(255,215,0)
background-color:#FFD70080
background-color:rgba(127,255,215,0.5)

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';
}
ou

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;
}
ou

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');
}
ou

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');
}
ou

function getBackgroundColor(el) {
return $(el).css('background-color');
}

Simulateur.

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.

1
background-color
Estimation de la prise en charge en pourcentage du parc actuel.
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet

Voir aussi, dans le même module de standardisation que background-color.

Les spécifications CSS éditées par le W3C sont organisées en modules. background-color fait partie du Module CSS - Arrière-plans et bordures (CSS Backgrounds and Borders Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Résumé des propriétés de l'arrière-plan.
Mode de défilement de l'image d'arrière-plan.
Définit l'étendue de l'arrière-plan, en particulier par rapport à la bordure et aux marges intérieures..
Image d'arrière-plan.
Position de l'image d'arrière-plan.
Définit comment se positionne l'image d'arrière-plan.
Définit comment se positionne l'image d'arrière-plan dans le sens horizontal.
Définit comment se positionne l'image d'arrière-plan dans le sens vertical.
Définit comment est répété l'image d'arrière-plan.
Dimensionnement de l'image d'arrière-plan.
Propriété résumée qui définit l'ensemble des paramètres des bordures.
Définit le rayon de l'angle arrondi en bas à gauche.
Définit le rayon de l'angle arrondi en bas à droite.
Définit la couleur des bordures.
Résumé des propriétés des bordures réalisées avec des images.
Définit le débordement de l'image de bordure.
Définit comment l'image de bordure est répétée ou dilatée pour couvrir la zone voulue..
Définit comment l'image de bordure est découpée.
Définit l'image utilisée pour construire la bordure.
Définit l'épaisseur de la bordure lorsque cette dernière est réalisée avec une image.
Rayon des angles arrondis.
Type de bordure (simple, double, pointillé...).
Définit le rayon de l'angle arrondi en haut à gauche.
Définit le rayon de l'angle arrondi en haut à droite.
Définit l'épaisseur de la bordure de l'élément.
Applique un effet d'ombrage sur les blocs.