CSS background-image Eigenschaft

Die CSS-Eigenschaft background-image setzt ein oder mehrere Hintergrundbilder für ein Element. Das Bild kann eine echte Bilddatei sein, die mit url() referenziert wird, oder ein CSS-generiertes Bild wie ein Farbverlauf.

Standardmäßig wird ein Hintergrundbild in der oberen linken Ecke des Elements platziert und gekachelt (horizontal und vertikal wiederholt), um den verfügbaren Platz auszufüllen. Dieses Verhalten lässt sich mit den verwandten Eigenschaften background-repeat, background-position, background-size und background-attachment steuern — oder alles auf einmal mit der background-Kurzschreibweise.

Der Malbereich umfasst den Inhalt des Elements, den Innenabstand (padding) und die Rahmenbox (border), jedoch nicht den Außenabstand (margin). Welche Box verwendet wird, lässt sich mit background-clip ändern, und wo die Positionierung beginnt, mit background-origin.

Wann verwenden

Verwende background-image statt eines eingebetteten <img>, wenn das Bild dekorativ und kein Inhalt ist — Hintergründe, Texturen, Hero-Bereiche, Farbverläufe und Icons, die keine inhaltliche Bedeutung für die Seite haben. Da Hintergründe von Screenreadern nicht gelesen werden, dürfen hier keine informationstragenden Bilder stehen; verwende stattdessen ein <img> mit alt-Text.

Einige wichtige Hinweise vorab:

Immer zusammen mit background-color als Fallback verwenden. Wenn das Bild nicht geladen werden kann (oder noch lädt), wird stattdessen die Farbe angezeigt und der Text bleibt lesbar.
Mehrere Bilder werden gestapelt. Wenn mehrere durch Kommas getrennte Bilder angegeben werden, wird das erste oben gemalt und jedes folgende Bild liegt dahinter.
Farbverläufe sind auch Bilder. linear-gradient() und radial-gradient() erzeugen CSS-Bilder und gehören daher in background-image, nicht in background-color.

Anfangswert	none
Gilt für	Alle Elemente. Gilt auch für ::first-letter und ::first-line.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS1 + einige neue Werte in CSS3
DOM-Syntax	object.style.backgroundImage = "url(img_tree.png)";

Syntax

Syntax der CSS background-image Eigenschaft

background-image: url | none | linear-gradient | radial-gradient | repeating-linear-gradient | repeating-radial-gradient | initial | inherit;

Beispiel der background-image Eigenschaft:

Beispiel der CSS background-image Eigenschaft

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Background-image property example</h2>
    <p>Hello World!</p>
  </body>
</html>

Probier es selbst »

Ergebnis

Im nächsten Beispiel werden zwei Bilder gleichzeitig verwendet. Sie werden mit background-position und background-repeat überlagert, und background-attachment: fixed hält sie beim Scrollen der Seite an ihrer Position.

Beispiel der background-image Eigenschaft mit anderen Hintergrund-Eigenschaften:

Beispiel der CSS background-image Eigenschaft mit 2 Bildern

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body {
        padding: 100px;
        background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-attachment: fixed;
        background-position: 5px 50px;
        background-repeat: no-repeat, repeat;
      }
    </style>
  </head>
  <body>
    <h2>Background-image property example</h2>
    <p>The background image is positioned 5px from the left, and 50px down from the top.</p>
  </body>
</html>

Probier es selbst »

Beachte die kommagetrennte Liste oben: background-repeat: no-repeat, repeat wendet no-repeat auf das erste Bild und repeat auf das zweite an — in derselben Reihenfolge, in der die Bilder aufgeführt sind. Diese bildweise Zuordnung ist die Art, wie mehrere Hintergründe konfiguriert werden.

Im nächsten Beispiel wird ein linear-gradient() mit zwei Farbstopps als Hintergrundbild für ein <div>-Element verwendet. Da ein Farbverlauf ein Bild ist, wird kein url() benötigt:

Beispiel der background-image Eigenschaft mit dem Wert "linear-gradient":

Beispiel der CSS background-image Eigenschaft mit dem Wert linear-gradient

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        height: 300px;
        background-image: linear-gradient(#eee, #1c87c9);
      }
    </style>
  </head>
  <body>
    <h2>Linear gradient as a background image example</h2>
    <p>This linear gradient starts at the top. It starts gray, transitioning to blue:</p>
    <div></div>
  </body>
</html>

Probier es selbst »

Beispiel der background-image Eigenschaft mit dem Wert "repeating-radial-gradient":

Beispiel der CSS background-image Eigenschaft mit dem Wert repeating-radial-gradient

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      div {
        height: 300px;
        background-color: #cccccc;
        background-image: repeating-radial-gradient(#8ebf42, #eee 15%, #ccc 30%);
      }
    </style>
  </head>
  <body>
    <h2>Radial gradient as a background image example</h2>
    <div></div>
  </body>
</html>

Probier es selbst »

Häufige Fallstricke

Das Bild ist unsichtbar, weil das Element keine Höhe hat. Ein Hintergrund benötigt eine Box, auf der er gemalt werden kann. Ein leeres <div> kollabiert auf null Höhe — gib ihm daher eine explizite height (wie in den Verlaufsbeispielen) oder etwas Inhalt.
Ein 404-Hintergrund schlägt lautlos fehl. Anders als <img> erzeugt eine fehlerhafte url() keinen Fehler und kein Fehlersymbol — der Bereich bleibt einfach leer (oder zeigt die background-color). Überprüfe den Pfad, wenn nichts erscheint.
Verwende background-color, nicht background-image, für eine Volltonfarbe. Farbverläufe gehören in background-image; flache Farben gehören in background-color.
Kachelung sieht falsch aus? Füge background-repeat: no-repeat hinzu und passe die Bildgröße mit background-size an (z. B. cover, um die Box auszufüllen).

Werte

Wert	Beschreibung
url	Definiert die URL des Bildes. Es können mehrere, durch Kommas getrennte Bilder angegeben werden.
none	Es wird kein Hintergrundbild gesetzt. Dies ist der Standardwert.
linear-gradient	Ein linearer Farbverlauf wird als Hintergrundbild festgelegt.
radial-gradient	Ein radialer Farbverlauf wird als Hintergrundbild festgelegt.
repeating-linear-gradient	Wiederholt einen linearen Farbverlauf.
repeating-radial-gradient	Wiederholt einen radialen Farbverlauf.
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übung

Welche CSS-Eigenschaften können verwendet werden, um das Hintergrundbild eines Elements zu steuern?

background-imagebackground-colorbackground-sizebackground-positiontext-color