Hintergrund

Baseline Widely available

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

Die background Kurzform CSS-Eigenschaft setzt alle Hintergrundstil-Eigenschaften auf einmal, wie 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%;
}

Einzelne 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;

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 background-Kurzform-Eigenschaft ermöglicht es Ihnen, alle CSS-Hintergrund-Eigenschaften in einer einzigen Deklaration zu definieren. Der Hintergrund liegt unter dem Inhalt eines Elements. Wenn Sie mehrere, durch Kommas getrennte Hintergrundwerte haben, ist jeder davon eine Hintergrundschicht, die auf den vorherigen Schichten angebracht wird.

Die background-Eigenschaft wird als eine oder mehrere Hintergrundschichten angegeben, die durch Kommas getrennt sind. Jede Schicht kann null, eines oder zwei <visual-box>-Komponenten und null oder eine <attachment>, <bg-image>, <bg-position>, <bg-size> und <repeat-style>-Komponenten enthalten. Wenn zwei <bg-position>, <bg-size> oder <repeat-style>-Komponenten angegeben sind, ist der erste Wert der horizontale Wert und der zweite der vertikale Wert. Wenn nur ein einzelner Wert gesetzt ist, wird dieser Wert auf beide Dimensionen angewendet.

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

Eigenschaften von Komponenten, die in der background-Kurzform-Eigenschaft-Deklaration nicht gesetzt sind, werden auf ihre Standardwerte gesetzt.

Reihenfolge der Komponenten-Eigenschaften

Da einige der Komponenten-Eigenschaften gleiche Werttypen teilen, ist die Reihenfolge dieser Komponenten-Eigenschaften innerhalb der Kurzform wichtig.

Der <bg-size>-Wert darf nur unmittelbar nach <bg-position>, getrennt mit dem /-Zeichen, enthalten sein. Zum Beispiel: 10px 10px / 80% 80% bedeutet, dass das Hintergrundbild 80% so hoch und breit wie das Element ist und 10px vom oberen und 10px vom linken oberen Eckpunkt des Elements positioniert wird. Innerhalb der <bg-position>, wenn 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 Hintergrundschicht kann null, eines oder zwei <visual-box>-Werte enthalten. Wenn nur ein Wert enthalten ist, setzt er sowohl background-origin als auch background-clip. Wenn zwei Werte vorhanden sind, gibt der erste das background-origin und der zweite die background-clip-Wert an. Wenn keine <visual-box>-Werte vorhanden sind, wird background-origin standardmäßig auf border-box und background-clip auf padding-box gesetzt.

Obwohl es keine Reihenfolge für die anderen Hintergrund-Eigenschaften gibt, wird die folgende Reihenfolge für Konsistenz und Lesbarkeit empfohlen; beachten Sie, dass keiner der Werte erforderlich ist:

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

Der folgende background setzt explizit alle Standardwerte in dieser Reihenfolge:

css

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

Die folgenden drei Zeilen CSS sind gleichbedeutend mit dem oben, selbst wenn die Reihenfolge unterschiedlich ist:

css

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

Reihenfolge der Bildmalerei

Wenn mehrere durch Kommas getrennte Hintergründe enthalten sind, erstellen sie mehrere Hintergrundschichten, die übereinander liegen. Der erste Hintergrund in der Liste erstellt die obere Schicht. Wenn die obere Schicht keine transparenten Bereiche enthält, ist dies die einzige sichtbare Schicht.

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

Hintergrund des Bodys auf das gesamte Dokument angewendet

Falls der berechnete background-image-Wert des Dokument-<html>-:root-Elements none und seine background-color transparent ist, überträgt der Browser die auf dem <body>-Element gesetzten background-Stile auf das :root und behandelt das <body> so, als ob background: initial gesetzt wäre. Mit anderen Worten, das <html>-Element erhält alle auf dem <body>-Element gesetzten background-Stile, und die Hintergrund-Eigenschaften des <body>-Elements 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 zu setzen. Es ist jedoch wichtig zu beachten, dass die Verwendung von Containment dieses Verhalten deaktiviert. Wenn die contain-Eigenschaft auf etwas anderes als none auf dem <html>- oder <body>-Element gesetzt ist, propagiert die background-Eigenschaft und ihre Einzelelemente nicht vom <body>-Element zum Wurzel-<html>-Element.

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

<final-bg-layer> = 
  <bg-image>                      ||
  <bg-position> [ / <bg-size> ]?  ||
  <repeat-style>                  ||
  <attachment>                    ||
  <bg-clip>                       ||
  <visual-box>                    ||
  <'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   

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

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

<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 bieten keine besonderen Informationen zu Hintergrundbildern für unterstützende Technologien. Dies ist vor allem für Bildschirmlesegeräte wichtig, da ein Bildschirmlesegerät dessen Anwesenheit nicht ansagt und somit den Benutzern nichts übermittelt. Wenn das Bild Informationen enthält, die zum Verständnis des Gesamtzwecks der Seite entscheidend sind, ist es besser, es semantisch im Dokument zu beschreiben.

Beispiele

Hintergründe mit Farbschlüsselwörtern und Bildern einstellen

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

Specification
CSS Backgrounds and Borders Module Level 3 # background

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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