CSS/Eigenschaften/background-size

Die Eigenschaft background-size legt die Größe des Hintergrundbildes fest

erlaubte Werte	eine oder zwei Längenangaben: legen die Abmessungen fest, mit denen die Grafik dargestellt wird. Der erste Wert ist die gewünschte Breite, der zweite Wert die gewünschte Höhe - fehlt der zweite Wert, wird auto angenommen. Wird für einen der beiden Werte auto verwendet, wird dieser Wert an Hand des natürlichen Seitenverhältnisses der Grafik aus dem anderen Wert berechnet. Schreibt man nur auto, verwendet der Browser auch die natürliche Größe der Grafik. 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 Vererbung steuernde Werte inherit, initial, unset und revert Defaultwert: auto
anwendbar auf	alle Elemente
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.

Nicht jede Grafik enthält ein Seitenverhältnis oder eine Defaultgröße. Bei Rasterformaten wie JPG oder PNG ist beides vorhanden, aber in SVG Grafiken kann beides fehlen. Wird eine auto-Bildgröße verlangt, ohne dass es eine natürliche Bildgröße gibt, wird contain als size-Angabe angenommen.

Weblinks

• Spezifikation (W3C): background-size

Siehe auch

• CSS/Tutorials/Hintergrund/Hero-Images