Hintergrund

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 Kurzform CSS-Eigenschaft legt alle Hintergrundstileigenschaften auf einmal fest, wie Farbe, Bild, Ursprung und Größe oder Wiederholungsmethode. Komponenten-Eigenschaften, die nicht in der background-Kurzformwert-Deklaration festgelegt sind, werden auf ihre Standardwerte gesetzt.

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"),
  #eee 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%;
}

Bestandteil-Eigenschaften

Diese Eigenschaft ist eine Kurzform 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 <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;

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

Die Syntax jeder Ebene ist wie folgt:

Jede Ebene kann null oder eine Vorkommen der folgenden Werte enthalten:
- <attachment>
- <bg-image>
- <bg-position>
- <bg-size>
- <repeat-style>
Der <bg-size>-Wert darf nur unmittelbar nach <bg-position> enthalten sein, getrennt durch das '/'-Zeichen, etwa so: center/80%.
Der <visual-box>-Wert kann null-, ein- oder zweimal enthalten sein. Wenn er einmal enthalten ist, setzt er sowohl background-origin als auch background-clip. Wenn er zweimal enthalten ist, setzt das erste Vorkommen background-origin, und das zweite setzt background-clip.
Der <'background-color'>-Wert kann nur in der zuletzt angegebenen Ebene enthalten sein.

Werte

<attachment>: Siehe background-attachment. Standard: scroll.
<visual-box>: Siehe background-clip und background-origin. Standard: border-box und padding-box.
<'background-color'>: Siehe background-color. Standard: transparent.
<bg-image>: Siehe background-image. Standard: none.
<bg-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 gleichwertig:

css

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

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>                    ||
  <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 bieten keine besonderen Informationen zu Hintergrundbildern für unterstützende Technologien. Dies ist vor allem für Bildschirmlesegeräte wichtig, da ein solches Gerät die Anwesenheit nicht ankündigt und somit nichts an seine Benutzer vermittelt. Wenn das Bild Informationen enthält, die entscheidend für das Verständnis des Gesamtszwecks der Seite sind, ist es besser, es semantisch im Dokument zu beschreiben.

Beispiele

Hintergründe mit Farbkeywords und Bildern festlegen

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