Docs CSS exécutables : Couleur de fond

Q: Comment changer la couleur de fond en HTML ?

Utilisez la propriété CSS background-color. Pour toute la page : body { background-color: #f3f4f6; }. Pour un élément : .

Q: L'attribut bgcolor est-il encore valide en HTML ?

Non. L'attribut bgcolor sur , et est obsolète en HTML5. Les navigateurs l'affichent encore pour les anciennes pages, mais la bonne méthode est background-color en CSS.

Q: Comment rendre une couleur de fond transparente ?

Utilisez une couleur avec un canal alpha, comme background-color: rgb(37 99 235 / 20%);. Contrairement à opacity, le texte à l'intérieur reste entièrement visible.

Q: Quelle est la différence entre background et background-color ?

background-color ne définit que la couleur. background est un raccourci pour toutes les propriétés de fond (couleur, image, position, taille, répétition, attachement, origin et clip), donc background: red; remet aussi toute image de fond à none.

Q: Pourquoi la couleur de fond de body remplit-elle toute la fenêtre ?

Quand l'élément n'a pas de fond propre, le navigateur peint le fond de body sur tout le canevas, même au-delà de la boîte de body. Donnez un fond à html si vous voulez que les deux diffèrent.

Comment définir une couleur de fond

background-color remplit la boîte d'un élément, padding et zone sous la bordure compris, avec une couleur. Elle accepte n'importe quelle couleur CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background color</title>
  <style>
    body { font-family: system-ui, sans-serif; background-color: #f3f4f6; }
    .card { background-color: #ffffff; padding: 16px; border-radius: 8px; margin-bottom: 12px; }
    .notice { background-color: #fef3c7; padding: 12px 16px; }
    mark { background-color: #bbf7d0; }
  </style>
</head>
<body>
  <div class="card">A white card on a light gray page.</div>
  <div class="notice">An amber notice.</div>
  <p>A <mark>highlighted phrase</mark> inside a sentence.</p>
  <p><span style="background-color: #2563eb; color: white; padding: 2px 6px;">inline style</span></p>
</body>
</html>

La couleur de la page est définie sur body, la carte et l'avertissement sur leurs div, et le surlignage sur un élément inline. Les éléments inline n'ont de fond que derrière leur texte, ligne par ligne.

Couleur de fond de toute la page

Placez background-color sur body. Si l'élément <html> n'a pas de fond propre, le navigateur peint le fond de body sur toute la fenêtre, même là où le contenu de body s'arrête :

body {
  background-color: #111827;
  color: #f9fafb; /* change the text color too, for contrast */
}

L'ancienne méthode HTML était <body bgcolor="black">. L'attribut bgcolor est obsolète sur tous les éléments, utilisez donc le CSS. Les navigateurs le respectent encore pour les anciennes pages, ce qui explique pourquoi il semble fonctionner.

Fonds transparents

Chaque élément commence avec background-color: transparent, vous voyez donc le parent derrière lui. Pour teinter une boîte tout en voyant à travers, utilisez une couleur avec un canal alpha :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transparent background</title>
  <style>
    body {
      font-family: system-ui, sans-serif; font-weight: 600; padding: 12px;
      background: repeating-linear-gradient(45deg, #bfdbfe 0 12px, #ffffff 12px 24px);
    }
    .box { padding: 16px; margin-bottom: 10px; color: #111827; }
    .none { background-color: transparent; border: 2px dashed #111827; }
    .tint { background-color: rgb(245 158 11 / 50%); }
    .solid { background-color: rgb(245 158 11); }
  </style>
</head>
<body>
  <div class="box none">transparent (the default)</div>
  <div class="box tint" id="tint">rgb(245 158 11 / 50%)</div>
  <div class="box solid">rgb(245 158 11)</div>
</body>
</html>

opacity: 0.5 laisserait aussi voir les rayures, mais il estompe aussi le texte. Pour un fond transparent avec un texte opaque, utilisez une couleur avec alpha. La page des couleurs liste toutes les façons de l'écrire.

Où la couleur est peinte

Par défaut, le fond s'étend jusqu'au bord extérieur de la bordure (il se voit donc à travers une bordure en tirets ou semi-transparente). background-clip change cela :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>background-clip</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .box {
      display: inline-block; margin: 6px; padding: 16px;
      border: 8px dashed #111827;
      background-color: #f59e0b;
    }
    .padding { background-clip: padding-box; }
    .content { background-clip: content-box; }
  </style>
</head>
<body>
  <div class="box">border-box</div>
  <div class="box padding">padding-box</div>
  <div class="box content">content-box</div>
</body>
</html>

Dans la première boîte, l'ambre apparaît entre les tirets. Dans la deuxième, il s'arrête au bord intérieur de la bordure, et dans la troisième seule la zone de contenu est colorée. La margin n'est jamais peinte : elle est toujours transparente.

Lignes de tableau alternées

Un fond sur une ligne sur deux rend les grands tableaux plus faciles à parcourir :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Striped rows</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    table { border-collapse: collapse; width: 100%; }
    th, td { padding: 8px 12px; text-align: start; }
    thead { background-color: #1f2937; color: white; }
    tbody tr:nth-child(even) { background-color: #f3f4f6; }
    tbody tr:hover { background-color: #dbeafe; }
  </style>
</head>
<body>
  <table>
    <thead><tr><th>Name</th><th>Role</th></tr></thead>
    <tbody>
      <tr><td>Ada</td><td>Engineer</td></tr>
      <tr><td>Grace</td><td>Admiral</td></tr>
      <tr><td>Alan</td><td>Mathematician</td></tr>
      <tr><td>Katherine</td><td>Physicist</td></tr>
    </tbody>
  </table>
</body>
</html>

background-color ou le raccourci background

background définit toutes les propriétés de fond à la fois. Chaque partie omise revient à sa valeur par défaut, ce qui surprend souvent :

.hero {
  background-image: linear-gradient(#2563eb, #1e40af);
  background: #111827;          /* also resets background-image to none */
}

.hero {
  background-image: linear-gradient(#2563eb, #1e40af);
  background-color: #111827;    /* only the color; the gradient stays */
}

Utilisez background-color quand vous ne voulez que la couleur. Utilisez background quand vous définissez tout le fond au même endroit, souvent une couleur plus une image ; voir background-image.

Accessibilité : l'associer à la couleur du texte

Une couleur de fond n'est lisible qu'à côté de sa couleur de texte. Chaque fois que vous en définissez une, vérifiez l'autre : les WCAG demandent un rapport de contraste d'au moins 4,5:1 pour le texte courant. Un fond sombre demande un texte clair défini explicitement, car le texte garde la couleur sombre dont il hérite.

Erreurs courantes

Utiliser bgcolor. Il est obsolète. Utilisez background-color.
Utiliser opacity pour un fond transparent. Le contenu s'estompe aussi. Utilisez une couleur avec alpha.
Un raccourci background après un background-image. Il réinitialise l'image. Écrivez plutôt background-color.
S'attendre à ce que la margin affiche la couleur. La margin est en dehors du fond. Utilisez le padding pour un espace coloré.
Un fond sombre avec le texte par défaut. Définissez aussi une color claire.

Questions fréquentes

Comment changer la couleur de fond en HTML ?

Utilisez la propriété CSS background-color. Pour toute la page : body { background-color: #f3f4f6; }. Pour un élément : <div style="background-color: #fef3c7;">.

L'attribut bgcolor est-il encore valide en HTML ?

Non. L'attribut bgcolor sur <body>, <table> et <td> est obsolète en HTML5. Les navigateurs l'affichent encore pour les anciennes pages, mais la bonne méthode est background-color en CSS.

Comment rendre une couleur de fond transparente ?

Utilisez une couleur avec un canal alpha, comme background-color: rgb(37 99 235 / 20%);. Contrairement à opacity, le texte à l'intérieur reste entièrement visible.

Quelle est la différence entre background et background-color ?

background-color ne définit que la couleur. background est un raccourci pour toutes les propriétés de fond (couleur, image, position, taille, répétition, attachement, origin et clip), donc background: red; remet aussi toute image de fond à none.

Pourquoi la couleur de fond de body remplit-elle toute la fenêtre ?

Quand l'élément <html> n'a pas de fond propre, le navigateur peint le fond de body sur tout le canevas, même au-delà de la boîte de body. Donnez un fond à html si vous voulez que les deux diffèrent.

Concepts liés