Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Übersicht

Die background CSS Eigenschaft ist eine Kurzschreibweise, um die verschiedenen Hintergrundwerte an einer einzigen Stelle im Stylesheet zu setzen. background kann dazu verwendet werden, einen oder mehrere der folgenden Werte zu setzen: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size und background-attachment.

Die background CSS Kurzschreibweiseeigenschaft weist explizit angegebene Werte zu und setzt die fehlenden Eigenschaften auf deren Initialwerte zurück.

Initialwertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter und ::first-line.
VererbtNein
Prozentwertewie 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
Medienvisuell
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypwie die jeweiligen Kurzschreibweisen:
Kanonische ReihenfolgeReihenfolge des Auftretens in der formalen Grammatik der Werte

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");
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>
See background-attachment
<box>
See background-clip
<background-color>
See background-color
<bg-image>
See background-image
<position>
See background-position
<repeat-style>
See background-repeat
<bg-size>
See background-size. Diese Eigenschaft muss nach <position> angegeben werden, getrennt durch das '/'-Zeichen.

Formale Syntax

[ <bg-layer> , ]* <final-bg-layer>

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

wobei
<bg-image> = none | <image>
<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> | 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

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

wobei
<image()> = image( [ [ <image> | <string> ]? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>

wobei
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<id-selector> = <hash-token>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )

wobei
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = <color-stop>#{2,}
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<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> ] ]

wobei
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<color-stop> = <color> <length-percentage>?

Beispiele

HTML

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

CSS

.warning { 
  background: red; 
}

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

Result

Spezifikationen

Spezifikation Status Kommentar
CSS Backgrounds and Borders Module Level 3
Die Definition von 'background' in dieser Spezifikation.
Anwärter Empfehlung Die Kurzschreibweiseeigenschaft 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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 4Opera Vollständige Unterstützung 3.5Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung 2Chrome Android Vollständige Unterstützung JaEdge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 5Safari iOS Vollständige Unterstützung 3.2Samsung Internet Android Vollständige Unterstützung Ja
Multiple backgroundsChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 3.6IE Vollständige Unterstützung 9Opera Vollständige Unterstützung 10.5Safari Vollständige Unterstützung 1.3WebView Android Vollständige Unterstützung 2Chrome Android Vollständige Unterstützung JaEdge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android ? Safari iOS Vollständige Unterstützung 3.2Samsung Internet Android Vollständige Unterstützung Ja
SVG image as backgroundChrome Vollständige Unterstützung 31Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 9IE Vollständige Unterstützung 9Opera Vollständige Unterstützung 21Safari Vollständige Unterstützung 5.1WebView Android Vollständige Unterstützung 3Chrome Android ? Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 4.2Samsung Internet Android ?
Values of background-size longhandChrome Vollständige Unterstützung 21Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 9IE Vollständige Unterstützung 9Opera Vollständige Unterstützung 21Safari Vollständige Unterstützung 5.1WebView Android Vollständige Unterstützung 3Chrome Android Vollständige Unterstützung JaEdge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 18Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 4Samsung Internet Android Vollständige Unterstützung Ja
Values of background-origin longhandChrome Vollständige Unterstützung 21Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 22IE Vollständige Unterstützung 9Opera Vollständige Unterstützung 21Safari Vollständige Unterstützung 5.1WebView Android Vollständige Unterstützung 3Chrome Android ? Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 22Opera Android Keine Unterstützung NeinSafari iOS Vollständige Unterstützung 4Samsung Internet Android ?
Values of background-clip longhandChrome Vollständige Unterstützung 21Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 22IE Vollständige Unterstützung 9Opera Vollständige Unterstützung 21Safari Vollständige Unterstützung 5.1WebView Android Vollständige Unterstützung 3Chrome Android ? Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 22Opera Android Keine Unterstützung NeinSafari iOS Vollständige Unterstützung 4Samsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt

 

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: fscholz, SphinxKnight, Sebastianz, Yuichiro, Jürgen Jeka, Michael2402
Zuletzt aktualisiert von: fscholz,