background

Try it

Die CSS Kurzformat-Eigenschaft backgroundsetzt alle Hintergrundstileigenschaften auf einmal, wie Farbe, Bild, Ursprung und Größe oder Wiederholungsmethode.

Eigenschaftsbestandteile

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

Syntax

/* Verwendung von <background-color> */
background: green;

/* Verwendung von <bg-image> und <repeat-style> */
background: url("test.jpg") repeat-y;

/* Verwendung von <box> und <background-color> */
background: border-box red;

/* Ein einzelnes Bild, zentriert und skaliert */
background: no-repeat center/80% url("../img/image.png");

Die Eigenschaft background wird als eine oder mehrere Hintergrundebenen, durch Kommata getrennt, angegeben.

Die Syntax der einzelnen Schichten ist wie folgt:

Jede Schicht kann null oder ein Vorkommen eines der folgenden Werte enthalten:
- <attachment>
- <bg-image>
- <position>
- <bg-size>
- <repeat-style>
Der Wert <bg-size> darf nur unmittelbar nach <position>, getrennt durch das Zeichen '/', wie folgt eingefügt werden: "center/80%".
Der Wert <box> kann Null, eins oder zwei Mal eingeschlossen werden. Wenn er einmal eingeschlossen wird, setzt er sowohl background-origin als auch background-clip. Bei zweimaligem Einschließen setzt das erste Vorkommen background-origin und das zweite Vorkommen background-clip.
Der Wert <background-color> darf nur in der zuletzt angegebenen Ebene enthalten sein.

Hinweis: Die background-color kann nur für den letzten Hintergrund definiert werden, da es nur eine Hintergrundfarbe für das gesamte Element gibt.

Werte

Einer oder mehrere der folgenden Werte, in beliebiger Reihenfolge:

<attachment>: Siehe background-attachment
<box>: Siehe background-clip and background-origin
<background-color>: Siehe background-color
<bg-image>: See background-image
<position>: Siehe background-position
<repeat-style>: Siehe background-repeat
<bg-size>: Siehe background-size.

Browser bieten keine speziellen Informationen über Hintergrundbilder zu unterstützenden Technologien. Dies ist vor allem für Bildschirmleseprogramme wichtig, da ein Bildschirmleseprogramm seine Anwesenheit nicht ankündigt und seinen Benutzern daher nichts vermittelt. Wenn das Bild Informationen enthält, die für das Verständnis des Gesamtzwecks der Seite entscheidend sind, ist es besser, diese im Dokument semantisch zu beschreiben.

Formale Definition

Initialwert	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 (en-US) und ::first-line (en-US).
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 (en-US): 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 (en-US): 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`: diskret `background-position`: repeatable list of simple list of length, percentage, or calc `background-size`: repeatable list of simple list of length, percentage, or calc `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>                    ||
  <box>                           ||
  <box>                           

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

<bg-image> = 
  <image>  |
  none     

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

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

<repeat-style> = 
  repeat-x                                     |
  repeat-y                                     |
  [ repeat | space | round | no-repeat ]{1,2}  

<attachment> = 
  scroll  |
  fixed   |
  local   

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

<image> = 
  <url>       |
  <gradient>  

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

<gradient> = 
  <linear-gradient()>            |
  <repeating-linear-gradient()> (en-US)  |
  <radial-gradient()>            |
  <repeating-radial-gradient()> (en-US)  

<linear-gradient()> = 
  linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )  

<radial-gradient()> = 
  radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )  

<side-or-corner> = 
  [ left | right ]  ||
  [ top | bottom ]  

<color-stop-list> = 
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#  

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

<linear-color-stop> = 
  <color>               &&
  <length-percentage>?  

<linear-color-hint> = 
  <length-percentage>  

<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         |
  <device-cmyk()>        

<absolute-color-base> = 
  <hex-color> (en-US)    |
  <named-color>  |
  transparent    |
  <rgb()>        |
  <rgba()>       |
  <hsl()>        |
  <hsla()>       |
  <hwb()>        |
  <lab()>        |
  <lch()>        |
  <oklab()>      |
  <oklch()>      |
  <color()>      

<device-cmyk()> = 
  device-cmyk( <cmyk-component>{4} [ / <alpha-value> ]? )  

<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )      

<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )  

<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )  

<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )  

<cmyk-component> = 
  <number>      |
  <percentage>  

<alpha-value> = 
  <number>      |
  <percentage>  

<hue> = 
  <number>  |
  <angle>   |
  none      

<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>             

<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}  

<xyz-params> = 
  <xyz-space> [ <number> | none ]{3}  

<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65

Beispiele

Hintergründe mit farbigen Schlüsselwörtern und Bildern setzen

HTML

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

CSS

.warning {
  background: pink;
}

.topbanner {
  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed;
}

Ergebnis

Spezifikationen

Spezifikation	Status	Kommentar
CSS Backgrounds and Borders Module Level 3 Die Definition von 'background' in dieser Spezifikation.	Anwärter Empfehlung	Die Kurzformat-Eigenschaft wurde erweitert, sodass sie mehrere Hintergründe und die neuen Eigenschaften `background-size`, `background-origin` und `background-clip` unterstützt.
CSS Level 2 (Revision 1) Die Definition von 'background' in dieser Spezifikation.	Empfehlung	Keine wesentlichen Änderungen
CSS Level 1 Die Definition von 'background' in dieser Spezifikation.	Empfehlung	Ursprüngliche Definition

Browser-Kompatibilität

BCD tables only load in the browser