CSS/Eigenschaften/background-size

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

• Spezifikation (W3C): background-size

Siehe auch

• CSS/Tutorials/Hintergrund/Hero-Images