`background-image` CSS property

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Mehr erfahren
Vollständige Kompatibilität anzeigen

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

Probieren Sie es aus

background-image: url("/shared-assets/images/examples/lizard.png");

background-image:
  url("/shared-assets/images/examples/lizard.png"),
  url("/shared-assets/images/examples/star.png");

background-image:
  url("/shared-assets/images/examples/star.png"),
  url("/shared-assets/images/examples/lizard.png");

background-image:
  linear-gradient(rgb(0 0 255 / 0.5), rgb(255 255 0 / 0.5)),
  url("/shared-assets/images/examples/lizard.png");

<section id="default-example">
  <div id="example-element"></div>
</section>

#example-element {
  min-width: 100%;
  min-height: 100%;
  padding: 10%;
}

Syntax

css

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

/* multiple images */
background-image:
  radial-gradient(circle, transparent 45%, black 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;

Werte

Diese Eigenschaft wird entweder als Stichwort none oder als durch Kommas getrennte Liste von <image>-Werten angegeben.

none: Ist ein Stichwort, das das Fehlen von Bildern kennzeichnet.
<image>: Ist ein <image>, das das darzustellende Bild bezeichnet.

Beschreibung

Die Eigenschaft background-image legt Hintergrundbilder für ein Element fest.

Sie können mehrere Hintergründe für ein Element definieren, indem Sie eine durch Kommas getrennte Liste von Bildern angeben. Die Hintergrundbilder werden in Stapelkontext-Ebenen übereinander gezeichnet. Die zuerst angegebene Ebene wird so gezeichnet, als wäre sie dem Benutzer am nächsten.

Die Ränder des Elements werden dann darüber gezeichnet, und die background-color wird darunter gezeichnet. Wie die Bilder relativ zur Box und 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 durch die angegebene URI bezeichnete Datei nicht geladen werden kann), behandeln Browser es so, als wäre der 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 – zum Beispiel, wenn das Netzwerk ausgefallen ist – wird die Hintergrundfarbe als Fallback verwendet.

Barrierefreiheit

Browser bieten keine speziellen Informationen zu Hintergrundbildern für assistive Technologien. Dies ist vor allem für Bildschirmleseprogramme wichtig, da ein solches Programm das Vorhandensein nicht ankündigen und daher nichts an seine Benutzer übermitteln wird. Wenn das Bild Informationen enthält, die zum Verständnis des Hauptzwecks der Seite entscheidend sind, sollte es besser semantisch im Dokument beschrieben werden.

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

Das Farbkontrastverhältnis wird durch den Vergleich der Leuchtdichte der Text- und Hintergrundfarbenwerte bestimmt. Um die Richtlinien für barrierefreie Webinhalte (WCAG) zu erfüllen, ist ein Verhältnis von 4,5:1 für den Inhalt des Fließtexts und 3:1 für größeren Text wie Überschriften erforderlich. Großer Text ist definiert als 24px oder größer oder fettgedruckt 18,66px oder größer.

Formelle 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

Formelle Syntax

background-image = 
  <bg-image>#  

<bg-image> = 
  <image>  |
  none     

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>

Beispiele

Hintergrundbilder übereinander legen

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

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

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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

background-image CSS property

HTML

CSS

Ergebnis

Help improve MDN

`background-image` CSS property