CSS Schnellstart – Hintergrund

Wir haben bisher nur eine Farbe als Hintergrund gesetzt, allerdings wirst du gerne mal ein Bild als Hintergrund verwenden wollen. CSS bietet also noch ein paar mehr Eigenschaften als nur die background-color Eigenschaft.

Bild als Hintergrund

Mit der Eigenschaft background-image kannst du ein Bild als Hintergrund festlegen:

background-image: url("bild.png");

Damit wird das Bild so wie es ist in den Hintergrund eingefügt.

Einstellungen für das Hintergrundbild

Die wichtigsten Eigenschaften für das Hintergrundbild sind background-repeat, background-size und background-attachment.

Mit background-repeat legst du fest, ob das Bild wiederholt werden soll. Gültige Werte sind repeat, no-repeat, repeat-x, repeat-y.

background-repeat: repeat-y;

Die Eigenschaft background-size legt die Größe fest. Hier gibt es die Werte auto, cover und contain.

background-size: contain;

Aber es können auch Größenangaben als Kurzschreibweise angegeben werden:

background-size: 100% 100%;

Durch background-attachment kannst du festlegen, wie sich das Hintergrundbild beim Scrollen verhält. Gültige Werte sind scroll, fixed und local.

Ich habe ein schönes Hintergrundbild für dich vorbereitet: