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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
background-image
element()
Experimental
Gradients
image-rect()
DeprecatedNon-standard
image-set()
Multiple backgrounds
none
SVG images

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch