CSS-Eigenschaft `background`

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die CSS-Kurzschreibweise background legt alle Hintergrund-Stileigenschaften gleichzeitig fest, etwa Farbe, Bild, Ursprung, Größe und Wiederholungsmethode.

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

Enthaltene Eigenschaften

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

Nur zurückgesetzte Untereigenschaften

Diese Eigenschaft setzt die folgenden CSS-Eigenschaften auf ihre Anfangswerte zurück:

background-blend-mode

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;

Werte

<attachment>: Siehe background-attachment. Standardwert: scroll.
<visual-box>: Siehe background-clip und background-origin. Die jeweiligen Standardwerte sind border-box und padding-box.
<'background-color'>: Siehe background-color. Standardwert: transparent.
<bg-image>: Siehe background-image. Standardwert: none.
<bg-position>: Siehe background-position. Standardwert: 0% 0%.
<repeat-style>: Siehe background-repeat. Standardwert: repeat.
<bg-size>: Siehe background-size. Standardwert: auto.

Mit der Kurzschreibweise background können Sie alle CSS-Hintergrundeigenschaften in einer einzigen Deklaration festlegen. Der Hintergrund liegt unter dem Inhalt eines Elements. Wenn Sie mehrere durch Kommas getrennte Hintergrundwerte angeben, bildet jeder Wert eine Hintergrundebene, die über den vorherigen Ebenen dargestellt wird.

Die Eigenschaft background wird durch eine oder mehrere durch Kommas getrennte Hintergrundebenen angegeben. Jede Ebene kann null, eine oder zwei <visual-box>-Komponenten sowie jeweils null oder eine <attachment>-, <bg-image>-, <bg-position>-, <bg-size>- und <repeat-style>-Komponente enthalten. Werden zwei <bg-position>-, <bg-size>- oder <repeat-style>-Komponenten angegeben, ist der erste Wert der horizontale und der zweite der vertikale Wert. Wird nur ein Wert angegeben, gilt er für beide Dimensionen.

Die Komponente <'background-color'> darf nur in der letzten angegebenen Hintergrundebene enthalten sein.

Komponenteneigenschaften, die in der Wertedeklaration der Kurzschreibweise background nicht festgelegt werden, erhalten ihre Standardwerte.

Reihenfolge der Komponenteneigenschaften

Da einige Komponenteneigenschaften dieselben Wertetypen verwenden, ist ihre Reihenfolge innerhalb der Kurzschreibweise wichtig.

Der Wert <bg-size> darf nur unmittelbar nach <bg-position> stehen, getrennt durch das Zeichen /. Beispielsweise bedeutet 10px 10px / 80% 80%, dass das Hintergrundbild 80% der Höhe und Breite des Elements einnimmt und jeweils 10px vom oberen und linken Rand der oberen linken Ecke des Elements entfernt positioniert wird. Wenn innerhalb von <bg-position> beide Werte Längen sind oder ein Wert eine Länge und der andere center ist, bezeichnet der erste Wert die horizontale und der zweite die vertikale Position.

Jede Hintergrundebene kann null, einen oder zwei <visual-box>-Werte enthalten. Wird nur ein Wert angegeben, legt er sowohl background-origin als auch background-clip fest. Sind zwei Werte vorhanden, legt der erste den Wert für background-origin und der zweite den Wert für background-clip fest. Sind keine <visual-box>-Werte vorhanden, ist der Standardwert für background-origin padding-box und für background-clip border-box.

Für die übrigen Hintergrundeigenschaften ist keine bestimmte Reihenfolge vorgeschrieben. Für Einheitlichkeit und Lesbarkeit wird jedoch die folgende Reihenfolge empfohlen; keiner der Werte ist erforderlich:

<bg-image> <bg-position> / <bg-size> <repeat-style> <attachment> <bg-clip> <bg-origin> <'background-color'>

Die folgende background-Deklaration legt alle Standardwerte ausdrücklich in dieser Reihenfolge fest:

css

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

Die folgenden drei CSS-Zeilen sind trotz unterschiedlicher Reihenfolge gleichwertig mit der obigen Deklaration:

css

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

Reihenfolge beim Zeichnen der Bilder

Werden mehrere durch Kommas getrennte Hintergründe angegeben, bilden sie mehrere übereinanderliegende Hintergrundebenen. Der erste Hintergrund in der Liste bildet die oberste Ebene. Enthält diese Ebene keine transparenten Bereiche, ist nur sie sichtbar.

Die letzte Ebene ist die unterste. Die Hintergrundfarbe ist immer Teil dieser Ebene.

Anwendung des Body-Hintergrunds auf das gesamte Dokument

Wenn der berechnete background-image-Wert des :root-Elements <html> im Dokument none und sein background-color-Wert transparent ist, überträgt der Browser die für das <body>-Element festgelegten background-Stile auf :root und behandelt <body> so, als wäre background: initial festgelegt. Mit anderen Worten: Das <html>-Element erhält alle für das <body>-Element festgelegten background-Stile, und die Hintergrundeigenschaften des <body>-Elements werden auf ihre Anfangswerte gesetzt.

Aufgrund dieses Verhaltens empfehlen die Autoren der Spezifikation, die Hintergrundstile Ihres Dokuments im Stilblock für body statt im Stilblock für html festzulegen. Beachten Sie jedoch, dass Containment dieses Verhalten deaktiviert. Wenn die Eigenschaft contain entweder für das <html>- oder das <body>-Element auf einen anderen Wert als none gesetzt ist, werden die Eigenschaft background und ihre einzelnen Komponenten nicht vom <body>-Element auf das Wurzelelement <html> übertragen.

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>                    ||
  <bg-clip>                       

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

<bg-image> = 
  <image>  |
  none     

<bg-position> = 
  <position>        |
  <position-three>  

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

<repeat-style> = 
  repeat-x           |
  repeat-y           |
  repeat-block       |
  repeat-inline      |
  <repetition>{1,2}  

<attachment> = 
  scroll  |
  fixed   |
  local   

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

<bg-clip> = 
  <visual-box>             |
  [ border-area || text ]  

<background-color> = 
  <color>  

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

<position> = 
  <position-one>   |
  <position-two>   |
  <position-four>  

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

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

<repetition> = 
  repeat     |
  space      |
  round      |
  no-repeat  

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<position-one> = 
  left                 |
  center               |
  right                |
  top                  |
  bottom               |
  x-start              |
  x-end                |
  y-start              |
  y-end                |
  block-start          |
  block-end            |
  inline-start         |
  inline-end           |
  <length-percentage>  

<position-two> = 
  [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ block-start | center | block-end ] && [ inline-start | center | inline-end ]  |
  [ start | center | end ]{2}                         

<position-four> = 
  [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ]  |
  [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ]  |
  [ [ start | end ] <length-percentage> ]{2}          

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>

Barrierefreiheit

Browser stellen Hilfstechnologien keine besonderen Informationen über Hintergrundbilder bereit. Dies ist vor allem für Screenreader wichtig: Ein Screenreader kündigt ein Hintergrundbild nicht an und vermittelt seinen Nutzern daher keine Informationen darüber. Wenn das Bild Informationen enthält, die für das Verständnis des Gesamtzwecks der Seite entscheidend sind, sollten Sie diese im Dokument semantisch beschreiben.

Beispiele

Hintergründe mit Farbschlüsselwörtern 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>

CSS

css

.warning {
  background: pink;
}

.top-banner {
  background: url("star-solid.gif") #9999ff repeat-y fixed;
}

Ergebnis

Spezifikationen

Spezifikation
CSS Backgrounds and Borders Module Level 3 # background

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

CSS-Eigenschaft background

HTML

CSS

Ergebnis

Help improve MDN

CSS-Eigenschaft `background`