CSS-Quicktipp: Hintergrundbilder genau zwei Mal wiederholen

Hintergrundbild genau zwei Mal wiederholen

CSS3 bietet ja schöne neue Möglichkeiten für Hintergrundbilder – bei der Wiederholung kann man beispielsweise dafür sorgen, dass Hintergrundbilder nie abgeschnitten werden. Wenn ich in meinen CSS-Kursen vorstelle, wie man mit Hintergrundbildern arbeitet, werde ich recht oft gefragt: „Und kann man auch angeben, dass ein Hintergrundbild nur zwei Mal oder drei Mal wiederholt wird? Also die exakte Anzahl festlegen?“ Nein, so etwas wie repeat-2x (2 x auf der x-Achse) oder repeat-3y (3 mal auf der y-Achse, d.h. untereinander), gibt es leider nicht. Nicht im Level 3 der W3C-Spezifikation und auch beim Entwurf der nächsten Version des backgrounds-and-borders-Moduls habe ich es nicht gefunden.

Aber natürlich lässt sich so etwas dank mehrfacher Hintergrundbilder leicht umsetzen.

Nehmen wir an, wir haben ein Hintergrundbild, das 80px mal 80px groß ist. Wir wollen das Hintergrundbild zwei Mal nebeneinander anzeigen lassen. Dann weisen wir das Hintergrundbild dem Element zwei Mal zu:

background-image: url('kreis.png'), url('kreis.png');

Außerdem legen wird fest, dass beide Bilder nicht wiederholt werden sollen; mit no-repeat werden sie genau einmal dargestellt:

background-repeat: no-repeat;

Und dann müssen wir nur noch die richtige Position angeben: Das erste Bild soll ganz links angezeigt werden, das zweite direkt daneben:

background-position: 0px 0px, 80px 0px;

Das zweite Bild wird mit 80px 0px um 80px von links und 0px von oben verschoben und befindet sich damit genau neben dem ersten Bild.

bei jsFiddle ausprobieren

Kommentare? Gerne :-)

HTML: Folgender HTML-Code kann verwendet werden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>