Propriété CSS background-color

❮ Précédent Suivant ❯

La propriété CSS background-color définit la couleur du fond d'un élément. Le fond de l'élément est sa dimension totale, y compris padding et bordure (mais pas le marge).

Donc, pour définir une couleur du fond, vous devez choisir quelque couleur. Vous pouvez choisir une couleur de notre Pipette de couleur tool. La couleur peut être écrite de trois manières: un nom de couleur - "red", une valeur HEX - "#ff0000" et une valeur RGB - "rgb(255,0,0)".

C'est important de s'assurer que le rapport de contraste entre la couleur du fond et la couleur de texte est placé suffisement haut, pour que les gens qui ont les problèmes de vision puissent lire le contenu de la page.

Valeur initiale	transparent
Appliquée à	Tous les éléments. Elle est aussi appliquée à ::first-letter et ::first-line.
Héritée	Non.
Animable	Oui. La couleur du fond est animable.
Version	CSS1
Syntaxe DOM	object.style.backgroundColor = "#FFFFFF";

Syntaxe

background-color: color | transparent | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      background-color: #8ebc42;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété background-color </h2>
    <p>Ici la background-color est spécifiée avec une valeur hex.</p>
  </body>
</html>

Essayez-vous-même!

Vous pouvez définir les valeurs hexadecimal, RGB, RGBA, HSL, HSLA ou les noms des couleurs pour la propriété background-color . Apprenez plus sur Les Couleurs HTML.

Voici une autre exemple avec une valeur "transparent".

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      background-color: transparent;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété background-color </h2>
    <p>Dans cet exemple, background-color est transparent. C'est la valeur initiale.</p>
  </body>
</html>

Essayez-vous-même!

Dans cet exemple vous pouvez voir une version animable.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      background-color: #eee;
      animation: mymove 5s infinite; 
      }
      @keyframes mymove {
      30% {background-color: #1c87c9;}
      }
    </style>
  </head>
  <body>
    <h2> Animation de la propriété background-color</h2>
    <p>Dans cet exemple la couleur du fond change graduellement de gris à bleu, et revient à gris.
    <p> 
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
transparent	C'est la valeur initiale et elle définit la couleur du fond transparent. Cela signifie qu'il n'y a pas de couleur du fond.
color	Défnit la couleur du fond. Les noms des couleurs, codes hexadecimaux des couleurs, rgb(), rgba(), hsl(), hsla() peuvent être utilisés.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.