background

Die CSS-Eigenschaft background ermöglicht es Ihnen, den Hintergrund jedes Elements zu steuern (was unter dem Inhalt dieses Elements gemalt wird). Es ist eine *Kurzschreibweise*-Eigenschaft, was bedeutet, dass Sie mehrere CSS-Eigenschaften in einer schreiben können. So:

body {
  background:
     url(sweettexture.jpg)    /* image */
     top center / 200px 200px /* position / size */
     no-repeat                /* repeat */
     fixed                    /* attachment */
     padding-box              /* origin */
     content-box              /* clip */
     red;                     /* color */
}

background besteht aus acht weiteren Eigenschaften

• background-image
• background-position
• background-size
• background-repeat
• background-attachment
• background-origin
• background-clip
• background-color

Sie können jede beliebige Kombination dieser Eigenschaften verwenden, und zwar in fast jeder Reihenfolge (obwohl die in der Spezifikation empfohlene Reihenfolge oben angegeben ist). Es gibt jedoch einen Haken: Alles, was Sie nicht in der background-Eigenschaft angeben, wird automatisch auf seinen Standardwert gesetzt. Wenn Sie also so etwas tun:

body {
  background-color: red;
  background: url(sweettexture.jpg);
}

Der Hintergrund ist transparent statt rot. Die Korrektur ist jedoch einfach: Definieren Sie background-color nach background oder verwenden Sie einfach die Kurzschreibweise (z. B. background: url(...) red;)

Mehrere Hintergründe

CSS3 fügte Unterstützung für mehrere Hintergründe hinzu, die übereinander geschichtet werden. Jede Hintergrund-bezogene Eigenschaft kann eine kommagetrennte Liste verwenden, wie hier:

body {
  background: url(sweettexture.jpg), url(texture2.jpg) black;
  background-repeat: repeat-x, no-repeat;
}

Jeder Wert in der kommagetrennten Liste entspricht einer Ebene: Der erste Wert ist die oberste Ebene, der zweite Wert ist die zweite Ebene, und die Hintergrundfarbe ist immer die letzte Ebene.

Demo

Browser-Unterstützung

Die Unterstützung variiert unter den verschiedenen spezifischen Eigenschaften, und jeder entsprechende Artikel im Almanac enthält eindeutige Hinweise zur Browserunterstützung. Grundlegende einfarbige Hintergründe und einzelne Bilder funktionieren jedoch überall, und alles, was nicht unterstützt wird, fällt auf die nächstbeste Sache zurück, sei es ein Bild oder eine Farbe.

IE	Edge	Chrome	Firefox	Safari	Opera
Ja	Ja	Ja	Ja	Ja	Ja

iOS	Chrome Android	Firefox Android	Android Browser	Opera Mobile
Ja	Ja	Ja	Ja	Ja