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

Standardwert

auto

anwendbar auf

alle Elemente

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.

Siehe auch

• CSS/Tutorials/Hintergrund/Hero-Images

Weblinks

• Spezifikation (W3C): background-size