`background` CSS-Eigenschaft

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.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die background CSS Kurzschreibweise definiert alle Hintergrund-Stileigenschaften auf einmal, wie z.B. Farbe, Bild, Ursprung, Größe und Wiederholungsmethode.

Probieren Sie es aus

background: green;

background: content-box radial-gradient(crimson, skyblue);

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

background: left 5% / 15% 60% repeat-x
  url("/shared-assets/images/examples/star.png");

background:
  center / contain no-repeat
    url("/shared-assets/images/examples/firefox-logo.svg"),
  #eeeeee 35% 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%;
}

Bestandteile der Eigenschaft

Diese Kurzschreibweise steht für folgende CSS-Eigenschaften:

Syntax

css

/* Using a <background-color> */
background: green;

/* Using a <bg-image> and <repeat-style> */
background: url("test.jpg") repeat-y;

/* Using a <visual-box> and <'background-color'> */
background: border-box red;

/* A single image, centered and scaled */
background: no-repeat center/80% url("../img/image.png");

/* Global values */
background: inherit;
background: initial;
background: revert;
background: revert-layer;
background: unset;

Werte

<attachment>: Siehe background-attachment. Standardwert: scroll.
<visual-box>: Siehe background-clip und background-origin. Standardwerte: border-box und padding-box.
<'background-color'>: Siehe background-color. Standardwert: transparent.
<bg-image>: Siehe background-image. Standardwert: none.
<bg-position>: Siehe background-position. Standardwert: 0% 0%.
<repeat-style>: Siehe background-repeat. Standardwert: repeat.
<bg-size>: Siehe background-size. Standardwert: auto.

Die background Kurzschreibweise ermöglicht es, alle CSS-Hintergrund-Eigenschaften in einer einzigen Deklaration anzugeben. Der Hintergrund liegt unter dem Inhalt eines Elements. Wenn Sie mehrere, durch Kommas getrennte Hintergrundwerte haben, ist jeder ein Hintergrund-Layer, der auf den vorherigen Layern gemalt wird.

Die background-Eigenschaft wird als einer oder mehrere Hintergrund-Layer beschrieben, die durch Kommas getrennt sind. Jeder Layer kann null, eins oder zwei <visual-box>-Komponenten und null oder eins <attachment>, <bg-image>, <bg-position>, <bg-size> und <repeat-style> Komponenten enthalten. Wenn zwei <bg-position>, <bg-size> oder <repeat-style> Komponenten angegeben sind, ist der erste Wert der horizontale Wert und der zweite Wert ist der vertikale Wert. Wenn nur ein einzelner Wert gesetzt ist, wird dieser Wert auf beide Dimensionen angewendet.

Die <'background-color'>-Komponente darf nur im letzten angegebenen Hintergrund-Layer enthalten sein.

Komponenteneigenschaften, die nicht in der background-Kurzschreibweise-Deklaration gesetzt sind, werden auf ihre Standardwerte zurückgesetzt.

Reihenfolge der Komponenten-Eigenschaften

Da einige der Komponenten-Eigenschaften denselben Wertetyp teilen, ist die Reihenfolge dieser Komponenten-Eigenschaften innerhalb der Kurzschreibweise wichtig.

Der <bg-size> Wert darf nur unmittelbar nach <bg-position> enthalten sein, getrennt durch das / Zeichen. Zum Beispiel: 10px 10px / 80% 80% bedeutet, dass das Hintergrundbild 80% so hoch und so breit wie das Element ist und 10px von oben und 10px von der linken oberen Ecke des Elements positioniert wird. Innerhalb von <bg-position>, wenn beide Werte Längen sind, oder wenn einer eine Länge und der andere center ist, bezieht sich der erste Wert auf die horizontale Position und der zweite Wert auf die vertikale Position.

Jeder Hintergrund-Layer kann null, eine, oder zwei <visual-box> Werte enthalten. Wenn nur ein Wert enthalten ist, setzt er sowohl background-origin als auch background-clip. Sind zwei Werte vorhanden, spezifiziert der erste die background-origin und der zweite den background-clip Wert. Sind keine <visual-box> Werte vorhanden, ist die background-origin standardmäßig padding-box und der background-clip standardmäßig border-box.

Während es keine Reihenfolgenanforderung für die anderen Hintergrund-Eigenschaften gibt, wird folgende Reihenfolge aus Konsistenz- und Lesbarkeitsgründen empfohlen; denken Sie daran, dass keiner der Werte erforderlich ist:

<bg-image> <bg-position> / <bg-size> <repeat-style> <attachment> <bg-clip> <bg-origin> <'background-color'>

Das folgende background setzt explizit alle Standardwerte in dieser Reihenfolge:

css

background: none 0% 0% / auto auto repeat scroll border-box padding-box
  transparent;

Die folgenden drei Zeilen CSS sind äquivalent zu obigem, auch wenn die Reihenfolge anders ist:

css

background: none;
background: transparent;
background: repeat scroll 0% 0% / auto padding-box border-box none transparent;

Reihenfolge der Bilder

Wenn mehrere, durch Kommas getrennte Hintergründe enthalten sind, erzeugen diese mehrere Hintergrundschichten übereinander. Der erste Hintergrund in der Liste erstellt die oberste Schicht. Wenn die oberste Schicht keine transparenten Bereiche enthält, ist dies die einzige sichtbare Schicht.

Die letzte Schicht ist die unterste. Die Hintergrundfarbe ist immer in dieser Schicht enthalten.

Hintergrund des Body auf das gesamte Dokument anwenden

Wenn der berechnete background-image Wert des :root Elements für das Dokument <html> none ist und seine background-color transparent ist, überträgt der Browser die auf das <body> Element gesetzten Hintergründe auf das :root und behandelt das <body>, als wäre background: initial gesetzt. Mit anderen Worten, das <html>-Element erhält alle auf das <body> Element gesetzten Hintergrundstile, und die Hintergrund-Eigenschaften des <body> Elements werden auf ihre Anfangswerte gesetzt.

Aufgrund dieses Verhaltens empfehlen die Autoren der Spezifikation, die Hintergrundstile des Dokuments im body-Stilblock zu setzen, anstatt im html-Stilblock. Es ist jedoch wichtig zu beachten, dass die Verwendung von Containment dieses Verhalten deaktiviert. Wenn die contain-Eigenschaft auf etwas anderes als none entweder auf dem <html> oder <body> Element gesetzt ist, wird die background-Eigenschaft und ihre Langform-Komponenten nicht vom <body> Element auf das Wurzelelement <html> übertragen.

Formale Definition

Anfangswert	wie die jeweiligen Kurzschreibweisen: `background-image`: `none` `background-position`: `0% 0%` `background-size`: `auto auto` `background-repeat`: `repeat` `background-origin`: `padding-box` `background-clip`: `border-box` `background-attachment`: `scroll` `background-color`: `transparent`
Anwendbar auf	alle Elemente. Auch anwendbar auf `::first-letter` und `::first-line`.
Vererbt	Nein
Prozentwerte	wie die jeweiligen Kurzschreibweisen: `background-position`: bezieht sich auf die Größe des Hintergrundpositionsbereichs abzüglich der Größe des Hintergrundbilds; die Größe bezieht sich auf die vertikalen und horizontalen Verschiebungen `background-size`: bezieht sich auf den jeweiligen Bereich
Berechneter Wert	wie die jeweiligen Kurzschreibweisen: `background-image`: wie angegeben, aber mit absoluten `<url>` Werten `background-position`: wie die jeweiligen Kurzschreibweisen: `background-position-x`: Eine Liste, bei der jeder Eintrag aus einem Versatz besteht, der durch eine Kombination aus absoluter Länge und einem Prozentsatz plus einem Ursprungsschlüsselwort definiert wird `background-position-y`: Eine Liste, bei der jeder Eintrag aus einem Versatz besteht, der durch eine Kombination aus absoluter Länge und einem Prozentsatz plus einem Ursprungsschlüsselwort definiert wird `background-size`: relativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers `background-repeat`: eine Liste, wobei jedes Element aus zwei Schlüsselwörtern besteht, eins pro Dimension `background-origin`: wie angegeben `background-clip`: wie angegeben `background-attachment`: wie angegeben `background-color`: berechnete Farbe
Animationstyp	wie die jeweiligen Kurzschreibweisen: `background-color`: Farbe `background-image`: diskret `background-clip`: a repeatable list `background-position`: a repeatable list `background-size`: a repeatable list `background-repeat`: diskret `background-attachment`: diskret

Formale Syntax

background = 
  <bg-layer>#? , <final-bg-layer>  

<bg-layer> = 
  <bg-image>                      ||
  <bg-position> [ / <bg-size> ]?  ||
  <repeat-style>                  ||
  <attachment>                    ||
  <visual-box>                    ||
  <bg-clip>                       

<final-bg-layer> = 
  <bg-image>                      ||
  <bg-position> [ / <bg-size> ]?  ||
  <repeat-style>                  ||
  <attachment>                    ||
  <visual-box>                    ||
  <bg-clip>                       ||
  <'background-color'>            

<bg-image> = 
  <image>  |
  none     

<bg-position> = 
  <position>        |
  <position-three>  

<bg-size> = 
  [ <length-percentage [0,∞]> | auto ]{1,2}  |
  cover                                      |
  contain                                    

<repeat-style> = 
  repeat-x           |
  repeat-y           |
  repeat-block       |
  repeat-inline      |
  <repetition>{1,2}  

<attachment> = 
  scroll  |
  fixed   |
  local   

<visual-box> = 
  content-box  |
  padding-box  |
  border-box   

<bg-clip> = 
  <visual-box>             |
  [ border-area || text ]  

<background-color> = 
  <color>  

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

<position> = 
  <position-one>   |
  <position-two>   |
  <position-four>  

<position-three> = 
  [ left | center | right ] && [ [ top | bottom ] <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ top | center | bottom ]  

<length-percentage> = 
  <length>      |
  <percentage>  

<repetition> = 
  repeat     |
  space      |
  round      |
  no-repeat  

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

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

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

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

<position-one> = 
  left                 |
  center               |
  right                |
  top                  |
  bottom               |
  x-start              |
  x-end                |
  y-start              |
  y-end                |
  block-start          |
  block-end            |
  inline-start         |
  inline-end           |
  <length-percentage>  

<position-two> = 
  [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ block-start | center | block-end ] && [ inline-start | center | inline-end ]  |
  [ start | center | end ]{2}                         

<position-four> = 
  [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ]  |
  [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ]  |
  [ [ start | end ] <length-percentage> ]{2}          

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

Barrierefreiheit

Browser bieten keine speziellen Informationen zu Hintergrundbildern für unterstützende Technologien an. Dies ist vor allem für Screenreader wichtig, da ein Screenreader seine Anwesenheit nicht ankündigt und somit den Benutzern nichts vermittelt. Wenn das Bild Informationen enthält, die für das Verständnis des gesamten Zwecks der Seite entscheidend sind, ist es besser, es im Dokument semantisch zu beschreiben.

Beispiele

Hintergründe mit Farbstichwörtern und Bildern setzen

HTML

html

<p class="top-banner">
  Starry sky<br />
  Twinkle twinkle<br />
  Starry sky
</p>
<p class="warning">Here is a paragraph</p>
<p></p>

CSS

css

.warning {
  background: pink;
}

.top-banner {
  background: url("star-solid.gif") #9999ff repeat-y fixed;
}

Ergebnis

Spezifikationen

Spezifikation
CSS Backgrounds and Borders Module Level 3 # background

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 CSS-Eigenschaft

HTML

CSS

Ergebnis

Help improve MDN

`background` CSS-Eigenschaft