CSS background-repeat

CSS background-repeat – Wiederholung, Hintergrund-Kacheln

background-repeat bestimmt ob und in welche Richtung Hintergrundbilder wiederholt werden (keine Wiederholung, nur horizontal oder nur vertikal wiederholen).

CSS background-repeat

Per Voreinstellung werden Hintergrundbild ü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.

CSS3 hat background-repeat gegen das Abschneiden rechts und unten mit zwei neuen 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, IE bereits ab Version 9/10.