Ausführbare CSS-Docs: Hintergrundfarbe

Q: Wie ändere ich die Hintergrundfarbe in HTML?

Mit der CSS-Eigenschaft background-color. Für die ganze Seite: body { background-color: #f3f4f6; }. Für ein einzelnes Element: .

Q: Ist bgcolor in HTML noch gültig?

Nein. Das Attribut bgcolor an , und ist in HTML5 veraltet. Browser stellen es für alte Seiten noch dar, aber der richtige Weg ist background-color in CSS.

Q: Wie mache ich eine Hintergrundfarbe transparent?

Nimm eine Farbe mit Alphakanal, etwa background-color: rgb(37 99 235 / 20%);. Anders als bei opacity bleibt der Text darin voll sichtbar.

Q: Was ist der Unterschied zwischen background und background-color?

background-color setzt nur die Farbe. background ist eine Kurzschreibweise für alle Hintergrund-Eigenschaften (Farbe, Bild, Position, Größe, Wiederholung, attachment, origin und clip), also setzt background: red; auch ein vorhandenes Hintergrundbild auf none zurück.

Q: Warum füllt die Hintergrundfarbe von body das ganze Fenster?

Hat das Element keinen eigenen Hintergrund, malt der Browser den Hintergrund von body über die gesamte Fläche, sogar über die Box von body hinaus. Gib html einen Hintergrund, wenn sich die beiden unterscheiden sollen.

So setzt du eine Hintergrundfarbe

background-color füllt die Box eines Elements, einschließlich des Paddings und der Fläche unter dem Rahmen, mit einer Farbe. Es akzeptiert jede CSS-Farbe.

<!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>

Die Seitenfarbe steht an body, Karte und Hinweis an ihren divs und die Hervorhebung an einem Inline-Element. Inline-Elemente bekommen einen Hintergrund nur hinter ihrem Text, Zeile für Zeile.

Hintergrundfarbe der ganzen Seite

Setz background-color an body. Hat das Element <html> keinen eigenen Hintergrund, malt der Browser den Hintergrund von body über das ganze Fenster, auch dort, wo der Inhalt von body endet:

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

Der alte HTML-Weg war <body bgcolor="black">. Das Attribut bgcolor ist an jedem Element veraltet, also nimm CSS. Browser beachten es für alte Seiten noch, und deshalb scheint es zu funktionieren.

Transparente Hintergründe

Jedes Element startet mit background-color: transparent, du siehst also das Elternelement dahinter. Um eine Box einzufärben und trotzdem hindurchzusehen, nimmst du eine Farbe mit Alphakanal:

<!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 würde die Streifen auch durchscheinen lassen, blendet aber den Text mit aus. Für einen durchsichtigen Hintergrund mit deckendem Text nimmst du eine Farbe mit Alpha. Die Seite zu Farben zeigt alle Schreibweisen dafür.

Wo die Farbe gemalt wird

Standardmäßig reicht der Hintergrund bis zur Außenkante des Rahmens (er scheint also durch einen gestrichelten oder halbtransparenten Rahmen durch). background-clip ändert das:

<!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>

In der ersten Box ist das Bernstein zwischen den Strichen zu sehen. In der zweiten endet es an der Innenkante des Rahmens, und in der dritten ist nur der Inhaltsbereich gefärbt. Margin wird nie bemalt: Es ist immer transparent.

Gestreifte Tabellenzeilen

Ein Hintergrund an jeder zweiten Zeile macht breite Tabellen leichter lesbar:

<!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 vs. die Kurzschreibweise background

background setzt alle Hintergrund-Eigenschaften auf einmal. Jeder Teil, den du weglässt, fällt auf seinen Standardwert zurück, und das überrascht viele:

.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 */
}

Nimm background-color, wenn du nur die Farbe meinst. Nimm background, wenn du den ganzen Hintergrund an einer Stelle setzt, oft eine Farbe plus ein Bild; siehe Hintergrundbild.

Barrierefreiheit: mit der Textfarbe kombinieren

Eine Hintergrundfarbe ist nur zusammen mit ihrer Textfarbe lesbar. Wann immer du eine setzt, prüf die andere: Die WCAG verlangen für Fließtext ein Kontrastverhältnis von mindestens 4,5:1. Dunkle Hintergründe brauchen explizit gesetzten hellen Text, weil Text die dunkle Farbe behält, die er erbt.

Häufige Fehler

bgcolor verwenden. Es ist veraltet. Nimm background-color.
opacity für einen durchsichtigen Hintergrund nutzen. Es blendet auch den Inhalt aus. Nimm eine Farbe mit Alpha.
Eine background-Kurzschreibweise nach einem background-image. Sie setzt das Bild zurück. Schreib stattdessen background-color.
Erwarten, dass Margin die Farbe zeigt. Margin liegt außerhalb des Hintergrunds. Für farbigen Abstand nimmst du Padding.
Ein dunkler Hintergrund mit Standardtext. Setz zusätzlich eine helle color.

Häufig gestellte Fragen

Wie ändere ich die Hintergrundfarbe in HTML?

Mit der CSS-Eigenschaft background-color. Für die ganze Seite: body { background-color: #f3f4f6; }. Für ein einzelnes Element: <div style="background-color: #fef3c7;">.

Ist bgcolor in HTML noch gültig?

Nein. Das Attribut bgcolor an <body>, <table> und <td> ist in HTML5 veraltet. Browser stellen es für alte Seiten noch dar, aber der richtige Weg ist background-color in CSS.

Wie mache ich eine Hintergrundfarbe transparent?

Nimm eine Farbe mit Alphakanal, etwa background-color: rgb(37 99 235 / 20%);. Anders als bei opacity bleibt der Text darin voll sichtbar.

Was ist der Unterschied zwischen background und background-color?

background-color setzt nur die Farbe. background ist eine Kurzschreibweise für alle Hintergrund-Eigenschaften (Farbe, Bild, Position, Größe, Wiederholung, attachment, origin und clip), also setzt background: red; auch ein vorhandenes Hintergrundbild auf none zurück.

Warum füllt die Hintergrundfarbe von body das ganze Fenster?

Hat das Element <html> keinen eigenen Hintergrund, malt der Browser den Hintergrund von body über die gesamte Fläche, sogar über die Box von body hinaus. Gib html einen Hintergrund, wenn sich die beiden unterscheiden sollen.

Verwandte Konzepte