CSS/Eigenschaften/background

Die Eigenschaft background ist die zusammenfassende Eigenschaft von background-image, background-position, background-size, background-repeat, background-attachment, background-origin, background-clip und background-color. background-position und background-repeat sind ihrerseits wieder zusammenfassende Eigenschaften, so dass sich mit der background-Eigenschaft 10 Einzelwerte setzen lassen.

Erlaubte Werte

siehe Einzelwerte

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

siehe Einzelwerte

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

nein

Beispiel

body {
  background: white url("../bilder/background.png") 
              repeat-x 
              top center;
}

Der body erhält ein Hintergrundbild und eine Farbangabe für den Fall, dass das Hintergrundbild durchscheinend ist oder nicht geladen wird.
Die Hintergrundgrafik wird oben mittig ausgerichtet und entlang der x-Achse wiederholt.

Beachten Sie:

• Eine Angabe zu background-size muss nach der Angabe zu background-position erfolgen und wird von dieser durch einen Slash (/) getrennt.
• Die Werte für background-clip und background-origin bezeichnen beide den Anzeigebereich des Hintergrundbildes, sind also nicht unterscheidbar. Deshalb gilt:
  • ein gesetzter Wert gilt für beide Eigenschaften gleichermaßen
  • bei zwei Werten bezeichnet der erste den Wert für background-clip, der zweite spezifiziert background-origin
• Nur der zuletzt angegebene Hintergrund darf eine Hintergrundfarbe erhalten, siehe auch Verwenden mehrerer Hintergrundbilder
• Nicht angegebene Eigenschaften werden mit ihren Ausgangswerten initialisiert.

Alle Angaben sind optional. Die Reihenfolge ist bis auf die genannten Einschränkungen beliebig. Die Werte für die einzelnen Hintergrundgrafiken werden durch Kommata getrennt.

Empfehlung: Verwenden Sie stets möglichst kontrastreiche Kombinationen aus Vorder- und Hintergrundfarben, um sehbehinderten Menschen den Zugang zu Ihren Inhalten nicht zu erschweren. Der Color Contrast Checker von WebAIM kann Ihnen im Vorfeld bei der Farbwahl behilflich sein.

Hauptartikel: Grafik/Farbkonzept/Farben und Kontraste

Siehe auch

• CSS/Tutorials/Hintergrund/Gestaltung mit CSS
• Grafik/Farbkonzept/Farben und Kontraste

Weblinks

• Spezifikation (W3C): the background property