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 Shorthand CSS-Eigenschaft legt alle Hintergrundstil-Eigenschaften auf einmal fest, wie Farbe, Bild, Ursprung und Größe oder Wiederholungsmethode. Nicht in der background-Shorthand-Wertdeklaration festgelegte Komponenteneigenschaften werden auf ihre Standardwerte gesetzt.

Probieren Sie es aus

Zusätzliche 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 <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, getrennt durch Kommas.

Die Syntax jeder Ebene ist wie folgt:

  • Jede Ebene kann null- oder einmal vorkommen von den folgenden Werten:

    • <attachment>
    • <bg-image>
    • <position>
    • <bg-size>
    • <repeat-style>

  • Der <bg-size>-Wert darf nur unmittelbar nach <position> eingeschlossen werden, getrennt durch das '/'-Zeichen, so: center/80%.

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

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

Werte

<attachment>

Siehe background-attachment. Standard: scroll.

<box>

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

<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 Zeilen CSS sind äquivalent:

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

Formale Definition

Initialer Wertwie 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 bieten keine speziellen Informationen zu Hintergrundbildern für unterstützende Technologien. Dies ist vor allem für Screenreader wichtig, da ein Screenreader seine Anwesenheit nicht ankündigt und seinen Benutzern nichts mitteilt. Wenn das Bild Informationen enthält, die entscheidend für das Verständnis des Gesamtzwecks 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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch