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.

Die background-image CSS Eigenschaft setzt ein oder mehrere Hintergrundbilder auf ein Element.

Probieren Sie es aus

Die Hintergrundbilder werden auf Stapelkontext-Ebenen übereinander gezeichnet. Die zuerst angegebene Ebene wird gezeichnet, als ob sie dem Benutzer am nächsten ist.

Die Ränder des Elements werden dann darüber gezeichnet und die background-color wird unter ihnen gezeichnet. Wie die Bilder relativ zur Box und ihren 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 so, als hätte es den Wert none.

Hinweis: Auch wenn die Bilder undurchsichtig sind und die Farbe unter normalen Umständen nicht angezeigt wird, sollten Webentwickler immer eine background-color angeben. Wenn die Bilder nicht geladen werden können - beispielsweise wenn das Netzwerk ausgefallen 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, getrennt durch ein Komma, an.

Werte

none: Ist ein Schlüsselwort, das die Abwesenheit von Bildern bezeichnet.
<image>: Ist ein <image>, der das anzuzeigende Bild bezeichnet. Es kann mehrere davon geben, die durch Kommas getrennt sind, da mehrere Hintergründe unterstützt werden.

Barrierefreiheit

Browser bieten keine besonderen Informationen zu Hintergrundbildern für unterstützende Technologien. Dies ist hauptsächlich für Screenreader wichtig, da ein Screenreader seine Präsenz nicht ankündigen und daher seinen Benutzern nichts vermitteln wird. Wenn das Bild Informationen enthält, die zum Verständnis des allgemeinen Zwecks der Seite entscheidend sind, ist es besser, es semantisch im Dokument zu beschreiben.

Darüber hinaus ist es wichtig, sicherzustellen, dass das Kontrastverhältnis zwischen dem Hintergrundbild und dem Vordergrundtext hoch genug ist, damit Menschen mit eingeschränktem Sehvermögen den Seiteninhalt lesen können.

Das Farbkontrastverhältnis wird durch den Vergleich der Luminanz der Text- und Hintergrundfarbwerte bestimmt. Um die Web Content Accessibility Guidelines (WCAG) zu erfüllen, wird ein Verhältnis von 4,5:1 für Textinhalte des Körperautos und 3:1 für größere Texte wie Überschriften gefordert. Großer Text wird als 24px oder größer definiert oder fettgedruckt 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

Formatierte 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 das 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