Hintergrund: Wiederholungen verhindern oder einschränken
Während wir background-image früher in erster Linie mit Wiederholungen für die komplette Seite eingesetzt haben, ist background-image heute die Basis für Effekte wie feststehende Bilder wie z.B. das cover-image im Gutenberg-Editor.
Per Voreinstellung werden Hintergrundbilder über die gesamte Fläche des Elements lückenlos wagerecht und senkrecht wiederholt. Wenn das Hintergrundbild groß ist, wird es dabei auf der linken Seite und unten u.U. abgeschnitten.
Hintergrundbilder, die kleiner sind als das Platzangebot des umfassenden Blocks, werden wiederholt.
body { background-image: url("echse.webp"); background-repeat: no-repeat; }
no-repeat verhindert die Wiederholung. Andererseits läßt sich die Wiederholung auf eine Richtung beschränken:
background-repeat: repeat-x; background-repeat: repeat-y;
background-repeat round und space
CSS hat background-repeat gegen das Abschneiden rechts und unten mit zwei zusätzlichen Werten ausgestattet: round und space. Das Verhalten entspricht den Eigenschaften space und round für border-image-repeat.
.demo { background-image: url(echse.png); }
- repeat-x wiederholt das Hintergrundbild nur in x-Richtung – horizontal.
- repeat-y wiederholt das Hintergrundbild nur in y-Richtung – in der Senkrechten.
- no-repeat zeigt das Hintergrundbild genau einmal und ohne Wiederholung.
- repeat ist die Voreinstellung und wiederholt das Bild horizontal und vertikal.
- round wiederholt und packt so viele Elemente in die Box wie möglich und legt sie dann mittig.
- space wiederholt und packt so viele Elemente in die Box ohne Beschneidung wie möglich. Das erste und das letzte Bild werden an jede Seite des Elements gesetzt und der Freiraum wird gleichmäßig zwischen den Bildern verteilt. Dabei entstehen u.U. Lücken zwischen den Bildern.
background-repeat ist eine alte CSS-Eigenschaft. Die neueren Werte space und round werden von allen modernen Browsern unterstützt, selbst IE bereits ab Version 9/10.