background-image

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Die background-image-Eigenschaft von CSS legt ein oder mehrere Hintergrundbilder für ein Element fest.

Probieren Sie es aus

Die Hintergrundbilder werden auf Stapelkontextebenen gezeichnet, die übereinander liegen. Die zuerst angegebene Ebene wird so gezeichnet, als läge sie am nächsten zur Benutzerin oder zum Benutzer.

Die Ränder des Elements werden dann darüber gezeichnet, und die background-color wird darunter gezeichnet. Wie die Bilder relativ zum Kasten und seinen Rändern gezeichnet werden, wird durch die CSS-Eigenschaften background-clip und background-origin definiert.

Wenn ein angegebenes Bild nicht gezeichnet werden kann (z. B. wenn die Datei, die durch die angegebene URI bezeichnet wird, nicht geladen werden kann), behandeln Browser es, als hätte es den Wert none.

Hinweis: Selbst wenn die Bilder undurchsichtig sind und die Farbe unter normalen Umständen nicht angezeigt wird, sollten Webentwicklerinnen und Webentwickler immer eine background-color angeben. Wenn die Bilder nicht geladen werden können – beispielsweise wenn das Netzwerk nicht verfügbar ist –, wird die Hintergrundfarbe als Fallback verwendet.

Syntax

css

/* single image */
background-image: linear-gradient(black, white);
background-image: url("cat-front.png");

/* multiple images */
background-image: radial-gradient(circle, #0000 45%, #000f 48%),
  radial-gradient(ellipse farthest-corner, #fc1c14 20%, #cf15cf 80%);

/* Global values */
background-image: inherit;
background-image: initial;
background-image: revert;
background-image: revert-layer;
background-image: unset;

Jedes Hintergrundbild wird entweder als Schlüsselwort none oder als <image>-Wert angegeben.

Um mehrere Hintergrundbilder anzugeben, geben Sie mehrere Werte an, die durch ein Komma getrennt sind.

Werte

none: Ist ein Schlüsselwort, das das Fehlen von Bildern bezeichnet.
<image>: Ist ein <image>, das das anzuzeigende Bild bezeichnet. Es können mehrere durch Kommas getrennt werden, da mehrere Hintergründe unterstützt werden.

Barrierefreiheit

Browser bieten Assistenztechnologien keine besonderen Informationen zu Hintergrundbildern. Dies ist vor allem für Bildschirmlesegeräte wichtig, da diese das Vorhandensein eines Hintergrundbildes nicht ankündigen und somit nichts an die Benutzerin oder den Benutzer weitergeben. Wenn das Bild Informationen enthält, die entscheidend für das Verständnis des Zwecks der Seite sind, ist es besser, dies semantisch im Dokument zu beschreiben.

Es ist außerdem wichtig sicherzustellen, dass das Kontrastverhältnis zwischen dem Hintergrundbild und dem Vordergrundtext hoch genug ist, damit Personen mit eingeschränktem Sehvermögen den Inhalt der Seite lesen können.

Das Farbkontrastverhältnis wird bestimmt, indem die Leuchtdichte der Text- und Hintergrundfarbwerte verglichen wird. Um die Richtlinien für barrierefreie Webinhalte (WCAG) zu erfüllen, ist ein Verhältnis von 4,5:1 für Fließtext und 3:1 für größere Texte wie Überschriften erforderlich. Große Texte sind definiert als 24px oder größer oder fett gedruckt mit 18,66px oder größer.

Formale Definition

Anfangswert	`none`
Anwendbar auf	alle Elemente. Auch anwendbar auf `::first-letter` und `::first-line`.
Vererbt	Nein
Berechneter Wert	wie angegeben, aber mit absoluten `<url>` Werten
Animationstyp	diskret

Formale Syntax

background-image = 
  <bg-image>#  

<bg-image> = 
  <image>  |
  none     

<image> = 
  <url>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

Beispiele

Hintergrundbilder schichten

Beachten Sie, dass das Sternbild teilweise transparent ist und über dem Katzenbild geschichtet wird.

HTML

html

<div>
  <p class="cats-and-stars">This paragraph is full of cats<br />and stars.</p>
  <p>This paragraph is not.</p>
  <p class="cats-and-stars">Here are more cats for you.<br />Look at them!</p>
  <p>And no more.</p>
</div>

CSS

css

p {
  font-weight: bold;
  font-size: 1.5em;
  color: white;
  text-shadow: 0.07em 0.07em 0.05em black;
  background-image: none;
  background-color: transparent;
}

div {
  background-image: url("mdn_logo_only_color.png");
}

.cats-and-stars {
  background-image: url("star-transparent.gif"), url("cat-front.png");
  background-color: transparent;
}

Ergebnis

Spezifikationen

Specification
CSS Backgrounds and Borders Module Level 3 # background-image

Browser-Kompatibilität

BCD tables only load in the browser