Zum Inhalt springen

#background-size

Bestimmt die Größe des Hintergrundbildes.

default background-size: auto auto;

Das Hintergrundbild behält seine originale Größe bei.

Zum Beispiel ist dieses Hintergrundbild 960px x 640px groß. Sein Seitenverhältnis ist 3 mal 2. Es ist größer als sein Container (der 150px hoch ist) und wird daher abgeschnitten.

background-size: 120px 80px;

Sie können eine Größe in Pixeln angeben:

  • der erste Wert ist die horizontale Größe
  • der zweite ist die vertikale Größe

background-size: 100% 50%;

Sie können auch Prozentsatz-Werte verwenden. Beachten Sie, dass dies das Seitenverhältnis des Hintergrundbildes verändern und zu unerwarteten Ergebnissen führen kann.

background-size: contain;

Das Schlüsselwort contain ändert die Größe des Hintergrundbildes, um sicherzustellen, dass es voll sichtbar bleibt.

background-size: cover;

Das Schlüsselwort cover verändert die Größe des Hintergrundbildes, um sicherzustellen, dass das Element vollständig abgedeckt ist.

Nach oben