Wiederholungen des Hintergrundbilds mit background-repeat festlegen

Wenn man auf Websites den Elementen Hintergrundbilder zuweist, dann werden sie standardmäßig über die gesamte Breite und Höhe bzw. horizontal und vertikal gekachelt. Das ist nicht immer erwünscht. Ein häufiger Fall ist z.B. bei einem Firmenlogo, das als Hintergrundbild erscheinen, jedoch nicht gekachelt werden soll. Wenn das Hintergrundbild nicht gekachelt wird, wird der übrige Bereich mit der Hintergrundfarbe angezeigt, sofern man hierfür Angaben gemacht hat.

Mit und ohne background-repeat

Ob und wie ein Hintergrundbild gekachelt werden soll, wird mit der Eigenschaft background-repeat festgelegt. Hierbei kann man die folgenden Werte verwenden.

  • repeat (Standardeinstellung, Bild wird gekachelt)
  • no-repeat (Bild wird nicht gekachelt)
  • repeat-x (Bild wird horizontal gekachelt)
  • repeat-y (Bild wird vertikal gekachelt)
  • space (Kacheln ohne Teilbilder mit Freiraum)
  • round (Kacheln ohne Teilbilder durch Skalierung der Bilder)
  • initial (Setzt auf den Standardwert)
  • inherit (Vererbt durch Elternelement)

Nachfolgend ist ein Beispielcode abgebildet, aus der die Syntax ersichtlich ist.

CSS-Code mit background-repeat

Die Eigenschaft ist natürlich immer in Verbindung mit einem Hintergrundbild verwendbar. Nachfolgend ein Beispielcode mit den Werten repeat-x und repeat-y sowie die Abbildung der Darstellung im Browser.

.selektor1 {
background-image: url(bild.jpg);
background-repeat: repeat-x;
}

.selektor2 {
background-image: url(bild.jpg);
background-repeat: repeat-y;
}
repeat-x und repeat-y

Werte round und space

Beim Kacheln in horizontaler und/oder vertikaler Richtung hat man häufig den Effekt, dass die Elemente nicht mit einer ganzen Zahl an Bildern gekachelt werden und somit Teilbilder entstehen. Es kann durchaus vorkommen, dass das unerwünscht ist. Ab CSS3 sind für solche Fälle die beiden Werte space und round vorgesehen.

Mit space wird der Bereich mit einer ganzen Zahl an Bilder gekachelt. Wo normalerweise Teilbilder entstehen würden, bleibt ein freier Bereich, der zwischen den Bildern gleichmäßig verteilt wird. Mit round wird die Anzahl der Bilder auf eine ganze Zahl gerundet und die Bilder werden skaliert, damit die gerundete Anzahl an Bildern dargestellt wird. Ein Beispielcode.

.selektor1 {
background-image: url(bild.jpg);
background-repeat: space;
}

.selektor2 {
background-image: url(bild.jpg);
background-repeat: round;
}
background-repeat mit space und round

Zwei-Werte Syntax

Es ist beim background-repeat auch möglich, die sogenannte Zwei-Werte Syntax zu verwenden (Two-Value Syntax). Hierbei kann man mit einem Leerzeichen getrennt die Werte für das horizontale und vertikale Kacheln angeben. Der 1. Wert gilt für die horizontale Richtung und der 2. Wert für die vertikale.

Das ist vor allem in Verbindung mit den Werten round und space interessant. Beim vorherigen Beispiel ist beim Wert space der untere Bereich leer. Man könnte hier z.B. angeben, dass für das horizontale Kacheln der Wert space gilt, für das vertikale jedoch repeat, damit auch der untere Bereich gefüllt wird. Nachfolgend ist ein Beispielcode sowie die Darstellung im Browser.

.selektor1 {
background-image: url(bild.jpg);
background-repeat: space repeat;
}

.selektor2 {
background-image: url(bild.jpg);
background-repeat: round repeat;
}
background-repeat mit Two-Value Syntax

Die Werte round und space sowie die Zwei-Werte Syntax funktionieren nicht bei allen Browsern. Vor dem Einsatz sollte man sie mit den meist verwendeten Browsern testen und abwägen, ob man sie verwendet oder nicht.