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.