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 CSS legt ein oder mehrere Hintergrundbilder für ein Element fest.

Probieren Sie es aus

Die Hintergrundbilder werden auf Stapelebenen übereinander gezeichnet. Die erste angegebene Ebene wird so gezeichnet, als ob sie der Benutzerin oder dem Benutzer am nächsten wäre.

Die Ränder des Elements werden dann darauf gezeichnet, und die background-color wird darunter gezeichnet. Wie die Bilder relativ zur Box und zu deren Rändern gezeichnet werden, wird durch die CSS-Eigenschaften background-clip und background-origin definiert.

Wenn ein angegebenes Bild nicht gezeichnet werden kann (zum Beispiel, wenn die Datei, auf die durch die festgelegte URI verwiesen wird, nicht geladen werden kann), behandeln die Browser dies so, als wäre der Wert none angegeben.

Hinweis: Auch wenn die Bilder opak sind und die Farbe unter normalen Umständen nicht angezeigt wird, sollten Webentwicklerinnen und Webentwickler immer eine background-color festlegen. 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 das Schlüsselwort none oder als ein <image>-Wert angegeben.

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

Werte

none

Ist ein Schlüsselwort, das das Fehlen von Bildern bezeichnet.

<image>

Ist ein <image>, das das anzuzeigende Bild angibt. Es können mehrere davon durch Kommata getrennt angegeben werden, da mehrere Hintergründe unterstützt werden.

Barrierefreiheit

Browser stellen unterstützenden Technologien keine speziellen Informationen zu Hintergrundbildern bereit. Dies ist vor allem für Screenreader wichtig, da diese die Anwesenheit eines Bildes nicht verkünden und daher nichts an die Benutzerinnen und Benutzer weitergeben. Falls das Bild Informationen enthält, die für das Verständnis des Gesamtzwecks der Seite wichtig sind, ist es besser, diese semantisch im Dokument zu beschreiben.

Zudem ist es wichtig sicherzustellen, dass der Kontrast zwischen dem Hintergrundbild und dem Vordergrundtext hoch genug ist, damit Personen mit eingeschränktem Sehvermögen den Seiteninhalt lesen können.

Das Kontrastverhältnis wird bestimmt, indem die Helligkeitswerte von Text und Hintergrundfarbe verglichen werden. Um die Web Content Accessibility Guidelines (WCAG) zu erfüllen, ist ein Verhältnis von 4,5:1 für Fließtext und 3:1 für größere Schriftarten wie Überschriften erforderlich. Große Schriftarten sind definiert als 24px oder größer oder fett mit mindestens 18,66px.

Formale Definition

Anfangswertnone
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter und ::first-line.
VererbtNein
Berechneter Wertwie angegeben, aber mit absoluten <url> Werten
Animationstypdiskret

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

Überlagerung von Hintergrundbildern

Beachten Sie, dass das Stern-Bild teilweise transparent ist und über das Katzen-Bild 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

Siehe auch