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).

Während wir Hintergrundbilder 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 und für die großen responsiven Bilder von Slidern.

18-12-15 SITEMAP

Hintergrund: Wiederholungen verhindern oder einschränken

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.

Hintergrundbilder, die kleiner sind als das Platzangebot des umfassenden Blocks, werden wiederholt.

background-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

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.