Ausführbare CSS-Docs: Hintergrundbild

Q: Wie füge ich in CSS ein Hintergrundbild hinzu?

Nimm background-image: url("photo.jpg"); am Element. Der Pfad ist relativ zur CSS-Datei (oder zur Seite, bei einem style-Attribut oder einem -Element). Gib dem Element eine Größe, denn ein Hintergrund lässt ein leeres Element nie wachsen.

Q: Wie lasse ich ein Hintergrundbild das ganze Element bedecken?

Mit background-size: cover; und background-position: center;. Das Bild skaliert unter Beibehaltung seiner Proportionen, bis es die Box vollständig füllt, und der Überstand wird abgeschnitten.

Q: Was ist der Unterschied zwischen cover und contain?

cover füllt die ganze Box und schneidet ab, was nicht passt. contain zeigt das ganze Bild und lässt an zwei Seiten leeren Platz, wenn die Proportionen abweichen.

Q: Wie verhindere ich, dass sich ein Hintergrundbild wiederholt?

Füge background-repeat: no-repeat; hinzu. Standardmäßig wird ein Hintergrundbild in beide Richtungen gekachelt, um das Element zu füllen.

Q: Warum wird mein Hintergrundbild nicht angezeigt?

Die üblichen Ursachen sind ein falscher Pfad in url() (er ist relativ zur CSS-Datei), ein Element ohne Höhe, weil es keinen Inhalt hat, oder eine spätere background-Kurzschreibweise, die das Bild zurückgesetzt hat.

So fügst du ein Hintergrundbild hinzu

background-image malt ein Bild hinter Inhalt, Padding und Rahmen des Elements. Standardmäßig beginnt es in der oberen linken Ecke der Padding-Box, behält seine natürliche Größe und wiederholt sich, um die Box zu füllen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background image</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .dots {
      /* a 24x24 image: one blue dot */
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='4' fill='%232563eb'/%3E%3C/svg%3E");
      height: 120px;
      padding: 16px;
      border: 2px solid #111827;
      font-weight: 600;
    }
  </style>
</head>
<body>
  <div class="dots">One 24px image, repeated to fill the box</div>
</body>
</html>

In einem echten Projekt zeigt url() auf eine Datei: url("images/hero.jpg"). Der Pfad ist relativ zu dem Stylesheet, in dem er steht (oder zur Seite, bei einem <style>-Element). Die Beispiele auf dieser Seite nutzen kleine SVG-Bilder, die inline als data:-URLs geschrieben sind, damit sie überall laufen.

Zwei Dinge solltest du von Anfang an wissen:

Ein Hintergrund gibt einem Element keine Größe. Ein leeres div mit Hintergrundbild ist 0px hoch. Gib ihm Inhalt, Padding, eine height oder ein aspect-ratio.
Ein Hintergrundbild ist Dekoration. Screenreader überspringen es, und es hat keinen Alternativtext. Ein Bild, das Bedeutung trägt, gehört in ein <img>-Element.

background-size: cover, contain und Längen

background-size skaliert das Bild. Die beiden Schlüsselwörter behalten seine Proportionen bei:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>cover vs contain</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box {
      --landscape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200'%3E%3Crect width='400' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='320' cy='50' r='24' fill='%23f59e0b'/%3E%3Cpath d='M0 200L120 70L220 200Z' fill='%2316a34a'/%3E%3Cpath d='M140 200L270 90L400 200Z' fill='%2315803d'/%3E%3C/svg%3E");
      width: 160px; height: 160px;
      background: var(--landscape) center / auto no-repeat, #e5e7eb;
      border: 2px solid #111827;
    }
    .cover { background-size: cover; }
    .contain { background-size: contain; }
    .stretch { background-size: 100% 100%; }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box"></div>auto (400x200, cropped)</div>
    <div><div class="box cover"></div>cover</div>
    <div><div class="box contain"></div>contain</div>
    <div><div class="box stretch"></div>100% 100% (distorted)</div>
  </div>
</body>
</html>

Das Bild ist doppelt so breit wie hoch, und jede Box ist quadratisch.

Wert	Ergebnis
`auto` (Standard)	Die eigene Größe des Bildes
`cover`	Skaliert, bis die Box vollständig gefüllt ist; der Überstand wird abgeschnitten
`contain`	Skaliert, bis das ganze Bild hineinpasst; an zwei Seiten bleiben graue Streifen
`200px`	200px breit, Höhe proportional
`50% auto`	Halb so breit wie die Box, Höhe proportional
`100% 100%`	Genau die Größe der Box; verzerrt das Bild, wenn die Proportionen abweichen

cover ist die übliche Wahl für Hero-Banner und Karten. contain ist für Logos und Illustrationen, die nie abgeschnitten werden dürfen.

background-position und background-repeat

background-position platziert das Bild in der Box, mit Schlüsselwörtern (top, center, bottom, left, right), Prozentwerten oder Längen. background-repeat steuert das Kacheln. Probier ein paar Werte aus:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Position and repeat</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box {
      height: 140px; margin-top: 10px;
      border: 2px solid #111827;
      background-color: #f3f4f6;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='4' fill='%232563eb'/%3E%3C/svg%3E");
      background-size: 48px;
    }
    label { display: block; margin-top: 6px; }
  </style>
</head>
<body>
  <label>background-position: <input id="pos" value="center" size="18"></label>
  <label>background-repeat: <input id="rep" value="no-repeat" size="18"></label>
  <div id="box"></div>
  <script>
    const box = document.getElementById('box');
    const pos = document.getElementById('pos');
    const rep = document.getElementById('rep');
    const show = () => {
      box.style.backgroundPosition = pos.value;
      box.style.backgroundRepeat = rep.value;
    };
    pos.addEventListener('input', show);
    rep.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Probier die Positionen top right, bottom 10px right 20px und 25% 75% und die Wiederholungswerte repeat-x, repeat-y, space (Kacheln mit Lücken, damit keine abgeschnitten wird) und round (Kacheln in der Größe angepasst, damit eine ganze Zahl hineinpasst).

Ebenen: mehrere Hintergründe und ein Text-Overlay

background-image nimmt eine durch Kommas getrennte Liste. Die erste Ebene wird obenauf gezeichnet. Der häufigste Einsatz ist ein halbtransparenter Farbverlauf über einem Foto, damit weißer Text lesbar bleibt:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Overlay</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .hero {
      --landscape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200'%3E%3Crect width='400' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='320' cy='50' r='24' fill='%23f59e0b'/%3E%3Cpath d='M0 200L120 70L220 200Z' fill='%2316a34a'/%3E%3Cpath d='M140 200L270 90L400 200Z' fill='%2315803d'/%3E%3C/svg%3E");
      background-image:
        linear-gradient(rgb(17 24 39 / 10%), rgb(17 24 39 / 75%)),
        var(--landscape);
      background-size: cover;
      background-position: center;
      aspect-ratio: 16 / 7;
      display: flex; align-items: end;
      padding: 20px; box-sizing: border-box;
      color: white;
    }
    h1 { margin: 0; font-size: 32px; }
  </style>
</head>
<body>
  <div class="hero" id="hero"><h1>Readable over an image</h1></div>
</body>
</html>

aspect-ratio gibt der leeren Box eine Höhe, und background-size: cover gilt für beide Ebenen. Mehr Rezepte für Verläufe findest du unter CSS Farbverlauf.

Die Kurzschreibweise background

background setzt alle Hintergrund-Eigenschaften in einer Zeile. Die Größe muss direkt nach der Position stehen, getrennt durch einen Schrägstrich, und die Farbe gehört in die letzte Ebene:

.hero {
  background: url("hero.jpg") center / cover no-repeat, #1f2937;
}
/* the same as */
.hero {
  background-image: url("hero.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #1f2937;
}

Die Ersatzfarbe ist zu sehen, während das Bild lädt, und falls es nicht lädt. Jede Eigenschaft, die du in der Kurzschreibweise weglässt, wird auf ihren Standardwert zurückgesetzt. Setz die Kurzschreibweise also zuerst und die einzelnen Eigenschaften danach.

Weitere Hintergrund-Eigenschaften

Eigenschaft	Was sie macht
`background-attachment: fixed`	Das Bild bleibt stehen, während die Seite scrollt (in Safari auf iOS ignoriert)
`background-origin`	Ob die Position an der Rahmen-, Padding- oder Inhaltskante beginnt
`background-clip`	Wo der Hintergrund gemalt wird, auch `text`, um Buchstaben zu füllen
`background-blend-mode`	Mischt Ebenen miteinander, etwa `multiply`

Häufige Fehler

Ein falscher Pfad. url() in einem Stylesheet ist relativ zur CSS-Datei, nicht zur HTML-Seite.
Ein leeres Element. Es hat keine Höhe, also hat das Bild keinen Platz, um sichtbar zu werden.
no-repeat vergessen bei contain oder einem kleinen Bild: Es wird gekachelt.
Mit 100% 100% strecken, obwohl cover gemeint war.
Wichtige Bilder als Hintergrund. Nimm für Inhalt <img> mit Alternativtext; Hintergründe sind für Screenreader unsichtbar.
Fehlende Anführungszeichen um eine data:-URL, die Leerzeichen oder Anführungszeichen enthält. Schreib immer url("...").

Häufig gestellte Fragen

Wie füge ich in CSS ein Hintergrundbild hinzu?

Nimm background-image: url("photo.jpg"); am Element. Der Pfad ist relativ zur CSS-Datei (oder zur Seite, bei einem style-Attribut oder einem <style>-Element). Gib dem Element eine Größe, denn ein Hintergrund lässt ein leeres Element nie wachsen.

Wie lasse ich ein Hintergrundbild das ganze Element bedecken?

Mit background-size: cover; und background-position: center;. Das Bild skaliert unter Beibehaltung seiner Proportionen, bis es die Box vollständig füllt, und der Überstand wird abgeschnitten.

Was ist der Unterschied zwischen cover und contain?

cover füllt die ganze Box und schneidet ab, was nicht passt. contain zeigt das ganze Bild und lässt an zwei Seiten leeren Platz, wenn die Proportionen abweichen.

Wie verhindere ich, dass sich ein Hintergrundbild wiederholt?

Füge background-repeat: no-repeat; hinzu. Standardmäßig wird ein Hintergrundbild in beide Richtungen gekachelt, um das Element zu füllen.

Warum wird mein Hintergrundbild nicht angezeigt?

Die üblichen Ursachen sind ein falscher Pfad in url() (er ist relativ zur CSS-Datei), ein Element ohne Höhe, weil es keinen Inhalt hat, oder eine spätere background-Kurzschreibweise, die das Bild zurückgesetzt hat.

Verwandte Konzepte