background-color

La propriété background-color permet de définir la couleur utilisée pour l'arrière-plan d'un élément (celle-ci peut être une couleur transparente).

/* Valeurs de couleur avec un mot-clé */
background-color: red;

/* Valeur de couleur avec code hexadécimal */
/* et un canal alpha */
background-color: #11ffee00; /* 00 - complètement transparent */
background-color: #11ffeeff; /* ff - complètement opaque */

/* Mots-clés pour les couleurs */
background-color: currentcolor;
background-color: transparent;

/* Valeurs globales */
background-color: inherit;
background-color: initial;
background-color: unset;

<div id="container">
  <div class="subcontainer">
    <div id="keyword" class="color"></div>
    <div class="caption">skyblue</div>
  </div>
  <div class="subcontainer">
    <div id="hex" class="color"></div>
    <div class="caption">#bbff00;</div>
  </div>
  <div class="subcontainer">
    <div id="rgb" class="color"></div>
    <div class="caption">rgb(240, 220, 180)</div>
  </div>
  <div class="subcontainer">
    <div id="rgba" class="color"></div>
    <div class="caption">rgb(240, 220, 180, 0.5)</div>
  </div>
  <div class="subcontainer">
    <div id="hsl" class="color"></div>
    <div class="caption">hsl(50, 60%, 75%)</div>
  </div>
  <div class="subcontainer">
    <div id="currentcolor" class="color"></div>
    <div class="caption">currentcolor</div>
  </div>
  <div class="subcontainer">
    <div id="transparent" class="color"></div>
    <div class="caption">transparent</div>
  </div>
</div>

#container {
  width: 100%;
  background-color: #F4F7F8;
  display: flex;
  flex-wrap: wrap;
}

.subcontainer {
  border: 1px solid black;
  height: 80px;
  margin: 10px;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  background-color: #dcdcdc;
  background-image:
      linear-gradient(45deg, rgb(0, 0, 0, 0.1) 25%, transparent 25%),
      linear-gradient(225deg, rgb(0, 0, 0, 0.1) 25%, transparent 25%),
      linear-gradient(225deg, rgb(0, 0, 0, 0.1) 25%, transparent 25%),
      linear-gradient(45deg, rgb(0, 0, 0, 0.1) 25%, transparent 25%);
  background-size: 20px 20px;
  background-position: 0 0, -10px -10px;
}

.color {
  width: 100%;
  flex: 1 0 auto;
}

.caption {
  background-color: white;
  padding: 10px;
  text-align: center;
  white-space: nowrap;
  color: black;
  font-family: monospace;
  font-weight: bold;
}

#keyword {
  background-color: skyblue;
}

#hex {
  background-color: #bbff00;
}

#rgb {
  background-color: rgb(240, 220, 180);
}

#rgba {
  background-color: rgb(240, 220, 180, 0.5);
}

#hsl {
  background-color: hsl(50, 60%, 75%);
}

#currentcolor {
  background-color: currentcolor;
}

#transparent {
  background-color: transparent;
}

Syntaxe

La propriété background-color se définit grâce à une valeur de type <color>.

Valeurs

<color>

Une valeur de type <color> qui indique la couleur uniforme de l'arrière-plan. Même si une ou plusieurs images sont définies grâce à background-image, la couleur peut avoir un impact en fonction de la transparence des images. De façon générale, c'est une bonne pratique que de définir une couleur malgré la présence d'image pour prévenir aux problèmes de chargement des images.

Syntaxe formelle

<color>
où 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
où 
<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
où 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Exemples

CSS

.exemple_un {
  background-color: teal;
  color: white;
}

.exemple_deux {
  background-color: rgb(153,102,153);
  color: rgb(255,255,204);
}

.exemple_trois {
  background-color: #777799;
  color: #FFFFFF;
}

HTML

<div class="exemple_un">
 Lorem ipsum dolor sit amet, consectetuer
</div>

<div class="exemple_deux">
  Lorem ipsum dolor sit amet, consectetuer
</div>

<div class="exemple_trois">
  Lorem ipsum dolor sit amet, consectetuer
</div>

Résultat

Spécifications

Compatibilité des navigateurs

Les données de compatibilité présentées sur cette page ont été générées à partir de données organisées. Ces données sont présentes sur le dépôt GitHub https://github.com/mdn/browser-compat-data, n'hésitez pas à contribuer en proposant vospull request.

1. In Internet Explorer 8 and 9, there is a bug where a computed background-color of transparent causes click events to not get fired on overlaid elements.

Voir aussi

• Gérer plusieurs arrières-plans