Florence Maurice

Kacheln nur mit ganzen Bildern, das geht mit CSS3: Zwei neue Werte sind in CSS3 für background-repeat vorgesehen: space und round. Damit kann man verhindern, dass gekachelte Hintergrundbilder abgeschnitten werden. Und das funktioniert bereits im Chrome und im Internet Explorer ab Version 9. Aber von Anfang an.

CSS 2.1 sieht vier Werte für background-repeat vor:

• background-repeat: repeat; bewirkt eine Kachelung: das Hintergrundbild wird solange vertikal und horizontal nebeneinander platziert, bis das Element ganz gefüllt ist. Es kann dabei auch passieren, dass das Hintergrundbild abgeschnitten wird.
• background-repeat: no-repeat bedeutet keine Wiederholung, sondern genau einmal.
• background-repeat: repeat-x wiederholt das Bild auf der x-Achse (nebeneinander)
• background-repeat: repeat-y wiederholt das Bild auf der y-Achse (untereinander).

Neu in CSS3: space und round

In CSS3 kommen jetzt zwei neue Werte für background-repeat dazu: space und round.

Gemeinsam ist den neuen Werten space und round, dass das Hintergrundbild wiederholt wird, bis das Element gefüllt ist. Im Gegensatz zu background-repeat: repeat wird das Hintergrundbild aber nie halb oder abgeschnitten dargestellt. Wenn nach der Wiederholung der ganzen Hintergrundbilder noch Platz zur Verfügung steht, verhalten sich space und round unterschiedlich:

• Bei background-repeat: space wird der übrige Platz als Leerraum zwischen die Hintergrundbilder verteilt
• Bei background-repeat: round werden die Hintergrundbilder passend vergrößert.

Links: background-repeat: space; rechts: background-repeat: round.

Zwei Werte bei background-repeat

Weitere Neuerung von CSS3 ist, dass man jetzt zwei Angaben hinter background-repeat schreiben kann, die erste bestimmt die Wiederholung auf der x-Achse (horizontal), der zweite die Wiederholung auf der y-Achse (vertikal).

Schreibt man beispielsweise

background-repeat: no-repeat space;

So wird das Hintergrundbild nur untereinander wiederholt, aber kein Hintergrund halb dargestellt, sondern der überflüssige Platz als Leerraum zwischen den Bildern angezeigt.

background-repeat: space no-repeat;

macht dasselbe, aber dieses Mal wird das Hintergrundbild nur nebeneinander wiederholt.

Einen ähnlichen  Effekt könnte man mit background-repeat: repeat-x bzw. background-repeat: repeat-y erreichen – allerdings kann es eben dann sein, dass das Hintergrundbild abgeschnitten wird. Deswegen zum Vergleich einmal die Angaben repeat-x und repeat-y:

Browersunterstützung für space und round bei background-repeat

Die neuen Werte für background-repeat unterstützen Chrome und Internet Explorer ab Version 9. Firefox ist bis einschließlich Version 32 nicht mit dabei.