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.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die CSS-Kurzform-Eigenschaft background legt alle Stileigenschaften für Hintergründe gleichzeitig fest, beispielsweise 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%;
}

Bestandteileigenschaften

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

Nur-zurücksetzbare 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. Standard: scroll.
<visual-box>: Siehe background-clip und background-origin. Standard: jeweils 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 Kurzform-Eigenschaft background ermöglicht es Ihnen, alle CSS-Hintergrundeigenschaften in einer einzelnen Deklaration festzulegen. Der Hintergrund befindet sich unterhalb des Inhalts eines Elements. Bei mehreren durch Kommas getrennten Hintergrundwerten ist jeder Wert eine Hintergrundebene, die über den vorherigen Ebenen gezeichnet wird.

Die Eigenschaft background wird als eine oder mehrere, durch Kommas getrennte Hintergrundebenen angegeben. Jede Ebene kann null, eine oder zwei <visual-box>-Komponenten sowie null oder eine <attachment>-, <bg-image>-, <bg-position>-, <bg-size>- und <repeat-style>-Komponente enthalten. Wenn zwei <bg-position>-, <bg-size>- oder <repeat-style>-Komponenten angegeben werden, ist der erste Wert der horizontale und der zweite der vertikale Wert. Wenn nur ein einzelner Wert festgelegt ist, wird dieser Wert auf beide Dimensionen angewendet.

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

Komponenteneigenschaften, die in der Wertdeklaration der Kurzform-Eigenschaft background nicht festgelegt werden, werden auf ihre Standardwerte gesetzt.

Reihenfolge der Komponenteneigenschaften

Da einige der Komponenteneigenschaften gemeinsame Werttypen haben, ist die Reihenfolge dieser Komponenteneigenschaften innerhalb der Kurzform wichtig.

Der Wert <bg-size> darf nur direkt nach <bg-position> stehen und muss durch das Zeichen / getrennt werden. Beispielsweise bedeutet 10px 10px / 80% 80%, dass das Hintergrundbild 80% so hoch und breit wie das Element ist und 10px vom oberen sowie 10px vom linken Rand der oberen linken Ecke des Elements positioniert wird. Wenn innerhalb von <bg-position> beide Werte Längen sind oder einer eine Länge und der andere center ist, bezieht sich der erste Wert auf die horizontale Position und der zweite auf die vertikale Position.

Jede Hintergrundebene kann null, einen oder zwei <visual-box>-Werte enthalten. Wenn nur ein Wert enthalten ist, legt dieser sowohl background-origin als auch background-clip fest. Wenn zwei Werte vorhanden sind, gibt das erste Vorkommen background-origin und das zweite den Wert für background-clip an. Wenn keine <visual-box>-Werte vorhanden sind, ist der Standardwert für background-origin padding-box und der Standardwert für background-clip border-box.

Obwohl für die anderen Hintergrundeigenschaften keine Reihenfolge erforderlich ist, wird aus Gründen der Konsistenz und Lesbarkeit die folgende Reihenfolge empfohlen; beachten Sie, dass keiner der Werte erforderlich ist:

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

Das folgende background legt in dieser Reihenfolge explizit alle Standardwerte fest:

css

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

Die folgenden drei CSS-Zeilen sind dem oben genannten äquivalent, auch wenn die Reihenfolge unterschiedlich ist:

css

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

Reihenfolge beim Zeichnen von Bildern

Wenn mehrere durch Kommas getrennte Hintergründe enthalten sind, erzeugen sie mehrere übereinanderliegende Hintergrundebenen. Der erste Hintergrund in der Liste erzeugt die oberste Ebene. Wenn die oberste Ebene keine transparenten Bereiche enthält, ist dies die einzige sichtbare Ebene.

Die letzte Ebene ist die unterste Ebene. Die Hintergrundfarbe ist immer in dieser Ebene enthalten.

Auf das gesamte Dokument angewendeter Body-Hintergrund

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

Aufgrund dieses Verhaltens empfehlen die Autoren der Spezifikation, die Hintergrundstile Ihres Dokuments in Ihrem body-Stilblock statt in Ihrem html-Stilblock festzulegen. Es ist jedoch wichtig zu beachten, dass die Verwendung von Containment dieses Verhalten deaktiviert. Wenn die Eigenschaft contain auf dem Element <html> oder <body> auf einen anderen Wert als none gesetzt ist, werden die Eigenschaft background und alle Longhand-Komponenten nicht vom Element <body> an das Root-Element <html> weitergegeben.

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 assistiven Technologien keine speziellen Informationen über Hintergrundbilder bereit. Dies ist vor allem für Screenreader wichtig, da ein Screenreader deren Vorhandensein nicht ankündigt und seinen Nutzern daher keine Informationen vermittelt. Wenn das Bild Informationen enthält, die für das Verständnis des Gesamtzwecks der Seite entscheidend sind, ist es besser, diese semantisch im Dokument zu 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>
<p></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`