CSS/Eigenschaften/Hintergrundfarben und -bilder/background-size

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Sie können jedes der Hintergrundbilder mithilfe der Eigenschaft background-size skalieren.

  • CSS 3.0
  • IE 9
  • Firefox
  • Safari
  • Chrome
  • Opera
Beispiel ansehen …
#eins  { background-size: 50px;}
#zwei  { background-size: auto 100px;}
#drei  { background-size: 50%; }
#vier  { background-size: 50% 100%; }
#fuenf { background-size: contain; }
#sechs { background-size: cover; }

Mit background-size können Sie die Größe der Hintergrundgrafiken unabhängig von anderen Darstellungsoptionen festlegen. Erlaubt sind dabei die Schlüsselwörter:

  • auto, Voreinstellung ü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
  • cover, passt unter Beibehaltung des Seitenverhältnisses die kleinere Seite der Grafik in den Anzeigebereich ein, ergibt eine vollständige Füllung des Anzeigebereiches

Weiterhin:

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.

Beispiel
{ background-size: 100px; } 
{ background-size: 100px auto; } /* sind identische Angaben */

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.