CSS background-repeat – Wiederholung eines Bildes steuern

Mit der CSS Eigenschaft background-repeat ist es möglich, die Wiederholung des Bildes im Hintergrund/Element einzustellen. Zuvor muss mittels background-image auch ein Image für ein Element festgelegt werden, um diese Eigenschaft anwenden zu können.

Beschreibung und Syntax zu CSS background-repeat

background-repeat: repeat;
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;

Erläuterung der Eigenschaften

background-repeat: repeat
Das Hintergrundbild wird vertikal und horizontal immer wieder wiederholt. Ist das Element worin es liegt ungleich der Bildgröße, könnte es auch nur teilweise wiederholt werden. Diese Eigenschaft nutzt man meist für den Hintergrund einer Seite (z.b. html, body)

background-repeat: no-repeat
Das Bild wird einmal angezeigt und nicht wiederholt!

background-repeat: repeat-x
Das Bild wird horizontal immer wieder wiederholt. Diese Eigenschaft wird oft für horizontale Farbübergänge z.B. im Header der Webseite eingesetzt.

background-repeat: repeat-y
Das Hintergrundbild wird nur vertikal immer wieder wiederholt. Oft wird dies für Listen oder ähnlichem gern genutzt.

Informationen und Werte

Diese CSS Eigenschaft ist nur anwendbar, wenn zuvor ein Hintergrundbild mittels background-image geladen wurde.

Vererbbar: Nein
Initialwert: repeat
Werte: repeat, no-repeat, repeat-x, repeat-y, inherit (vererbbar)