CSS/Eigenschaften/background-size

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft background-size bestimmt, an welcher Stelle sich die linken oberen Ecken der Hintergrundbilder befinden sollen.

erlaubte Werte
  • auto: übernimmt die Maße der Grafik, keine Skalierung
  • contain: passt unter Beibehaltung des Seitenverhältnisses die größere Seite der Grafik in den Anzeigebereich ein, ergibt eine vollständige Füllung des Anzeigebereiches
  • cover: passt unter Beibehaltung des Seitenverhältnisses die kleinere Seite der Grafik in den Anzeigebereich ein
  • ein Paar Längenangaben
    Die erste Angabe spezifiziert die gewünschte Breite der Hintergrundgrafik, die zweite entsprechend die Höhe.
    Ist nur ein Wert gegeben, so wird die Höhe unter Beibehaltung des Seitenverhältnisses skaliert.
  • Vererbung steuernde Werte inherit, initial, unset und revert
  • Defaultwert: auto
anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Browsersupport Details: caniuse.com
Vererbung nein
animierbar ja (Zahlenwerte, aber keine Schlüsselwörter)
Beispiel
body {
  background-image: url(…);
  background-size: 50% 100%; 
}
 
Beachten Sie: Soll nur die Höhe festgelegt werden, so kann dies mit background-size: auto 100px; geschehen. Prozentangaben sind im Gegensatz zu negativen Werten ebenfalls erlaubt. Sie beziehen sich auf die entsprechenden Angaben des Anzeigebereichs.

Weblinks

Siehe auch