background-image CSS property

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

/* 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.

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.

• MDN zur Erklärung von WCAG, Richtlinie 1.1
• Verständnis des Erfolgskriteriums 1.1.1 | WCAG 2.0 verstehen

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.

• WebAIM: Farbkontrast-Prüfer
• Verstehen von WCAG, Richtlinie 1.4
• Verständnis des Erfolgskriteriums 1.4.3 | WCAG 2.0 verstehen, W3C (2023)

Formelle Definition

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

<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

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

Browser-Kompatibilität

Siehe auch

• <img>

• Bildbezogene Funktionen:

  • linear-gradient()
  • radial-gradient()
  • conic-gradient()
  • repeating-linear-gradient()
  • repeating-radial-gradient()
  • repeating-conic-gradient()
  • <url>

• CSS-Verläufe verwenden

• Implementierung von Bild-Sprites in CSS

• CSS-Bilder Modul

• Hintergrundbezogene Eigenschaften

  • background-attachment
  • background-clip
  • background-color
  • background-origin
  • background-position
  • background-repeat
  • background-size
  • background Kurzform

• Lernen: Hintergründe und Ränder

• Verwendung mehrerer Hintergründe

• Hintergrundbilder skalieren

• CSS-Hintergründe und Ränder Modul