CSS/Eigenschaften/background

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft background ist die zusammenfassende Eigenschaft von background-color, background-image, background-repeat, background-attachment und background-position.

erlaubte Werte

siehe Einzelwerte

  • Vererbung steuernde Werte inherit, initial, unset und revert
  • Defaultwert: siehe Einzelwerte
anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Browsersupport Details: caniuse.com
Vererbung nein
animierbar nein
Beispiel
body {
  background: white url("../bilder/background.png") 
              repeat-x 
              top center;
}
Der body erhält eine Hintergundbild und eine Farbangabe für den Fall, dass das Hintergundbild 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.

Weblinks

Siehe auch