background

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die background-Shorthand-CSS-Eigenschaft legt alle Hintergrundstileigenschaften gleichzeitig fest, wie beispielsweise Farbe, Bild, Ursprung und Größe oder Wiederholungsmethode. Nicht in der Wertedeklaration der background-Shorthand-Eigenschaft gesetzte Komponenten-Eigenschaften werden auf ihre Standardwerte gesetzt.

Probieren Sie es aus

Zusammengesetzte Eigenschaften

Diese Eigenschaft ist eine Shorthand-Eigenschaft für die folgenden 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 <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;

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

Die Syntax jeder Ebene ist wie folgt:

  • Jede Ebene darf jeweils null oder einmal folgende Werte enthalten:

    • <attachment>
    • <bg-image>
    • <position>
    • <bg-size>
    • <repeat-style>
  • Der <bg-size>-Wert darf nur unmittelbar nach <position> eingeschlossen werden, getrennt durch das '/'-Zeichen, wie folgt: center/80%.

  • Der <box>-Wert kann null-, einmal oder zweimal eingeschlossen werden. Wenn er einmal eingeschlossen wird, legt er sowohl background-origin als auch background-clip fest. Wenn er zweimal eingeschlossen wird, legt das erste Vorkommen background-origin fest, und das zweite legt background-clip fest.

  • Der <background-color>-Wert darf nur in der letzten angegebenen Ebene enthalten sein.

Werte

<attachment>

Siehe background-attachment. Standard: scroll.

<box>

Siehe background-clip und background-origin. Standard: border-box und padding-box entsprechend.

<background-color>

Siehe background-color. Standard: transparent.

<bg-image>

Siehe background-image. Standard: none.

<position>

Siehe background-position. Standard: 0% 0%.

<repeat-style>

Siehe background-repeat. Standard: repeat.

<bg-size>

Siehe background-size. Standard: auto.

Die folgenden drei CSS-Zeilen sind äquivalent:

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

Formale Definition

Anfangswertwie 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
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypwie die jeweiligen Kurzschreibweisen:

Formale Syntax

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

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

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

<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,∞]> | auto ]{1,2} |
cover |
contain

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

<attachment> =
scroll |
fixed |
local

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

<background-color> =
<color>

<image> =
<url> |
<gradient>

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

<url> =
<url()> |
<src()>

<url()> =
url( <string> <url-modifier>* ) |
<url-token>

<src()> =
src( <string> <url-modifier>* )

Barrierefreiheit

Browser stellen keine speziellen Informationen zu Hintergrundbildern für unterstützende Technologie bereit. Dies betrifft vor allem Screenreader, da ein Screenreader das Vorhandensein nicht ankündigt und daher keine Information an seine Nutzer weitergibt. Wenn das Bild Informationen enthält, die für das Verständnis des Gesamtsinns der Seite entscheidend sind, sollte es besser semantisch im Dokument beschrieben werden.

Beispiele

Festlegen von Hintergründen mit Farb-Schlüsselwörtern und Bildern

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") #99f repeat-y fixed;
}

Ergebnis

Spezifikationen

Specification
CSS Backgrounds and Borders Module Level 3
# the-background

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
background
SVG image as background
Values of background-clip longhand
Values of background-origin longhand
Values of background-size longhand
Multiple backgrounds

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch