CSS-Eigenschaft background-repeat

.probe {
  background-repeat: repeat-x;
}

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'background-repeat'
repeat | repeat-x | repeat-y | no-repeat | inherit

repeat (Ausgangswert)

Das Hintergrundbild wird vom Ursprung aus horizontal und vertikal elementfüllend wiederholt.

repeat-x

Das Hintergrundbild wird vom Ursprung aus horizontal in beide Richtungen (rechts und links) elementfüllend wiederholt (mathematische x-Richtung).

repeat-y

Das Hintergrundbild wird vom Ursprung aus vertikal in beide Richtungen (oben und unten) elementfüllend wiederholt (mathematische y-Richtung).

no-repeat

Das Hintergrundbild wird nur im Ursprung einmal dargestellt und nicht wiederholt.

inherit

Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel

BODY {background-repeat: repeat-y;}

Wechselwirkungen

background, background-attachment, background-color, background-image, background-position

Die Kachelung beginnt an der Position

Das Bild wird nicht von der oberen linken Ecke aus gekachelt, sondern von der Stelle aus, die background-position bestimmt, und zwar in beide Richtungen. Steht das Bild in der Mitte, laufen die Kacheln von dort nach oben und unten, nach links und rechts.

Bei der Voreinstellung fällt das nicht auf, weil die Position ohnehin in der Ecke liegt. Sichtbar wird es, sobald eine Position gesetzt ist: eine Kachelung in nur einer Achse steht dann nicht am Rand, sondern auf der Höhe, die die Position vorgibt, und setzt sich nach beiden Seiten fort.

Aus diesem Zusammenspiel entsteht die mit Abstand verbreitetste Anwendung: ein waagerecht gekacheltes Bild, unten ausgerichtet, ergibt einen Verlauf am Fuß eines Elements, unabhängig von dessen Höhe.

Zu bedenken ist, dass die Fläche, über die gekachelt wird, nicht die Inhaltsfläche ist, sondern in CSS 2.1 bis an den Rahmen reicht und unter ihm bis an seine Außenkante durchscheint. Ein Element mit gestricheltem Rahmen zeigt das Hintergrundbild deshalb in den Lücken des Rahmens.

Was später hinzugekommen ist

CSS 2.1 kennt vier Werte, die auf eine einzige Frage antworten: in welchen Achsen wird wiederholt. Was passiert, wenn die Fläche kein ganzzahliges Vielfaches des Bildes ist, bleibt offen; die letzte Kachel wird abgeschnitten.

Später sind zwei Werte hinzugekommen, die genau diesen Rest behandeln. Der eine verteilt den Rest als gleichmäßigen Abstand zwischen den Kacheln, sodass keine angeschnitten wird; der andere streckt oder staucht das Bild so weit, dass es genau aufgeht. Beide setzen voraus, dass ein angeschnittenes Bild stört, was bei Mustern mit erkennbarer Form der Fall ist.

Ebenfalls später kam die Schreibweise mit zwei Werten, einem je Achse, und die Möglichkeit, mehrere Hintergrundbilder übereinanderzulegen, für die dann auch mehrere durch Komma getrennte Wiederholungsangaben notiert werden.

Für die Praxis bleibt eine Faustregel aus der Zeit dieser Seite gültig: Ein gekacheltes Bild sollte an seinen Kanten nahtlos anschließen, sonst wird die Wiederholung als Gitter sichtbar. Bei Mustern mit erkennbarer Richtung genügt dafür oft schon eine leichte Verschiebung im Bild selbst.

Besonderheiten im Medientyp handheld

Diese Eigenschaft ist Teil des Standards CSS Mobile Profile 1.0 und unterliegt damit auch in Mobilgeräten allen relevanten Regeln aus CSS 2.1. Hintergrundeigenschaften werden von den meisten Mobilgeräten nicht dargestellt und es muss auch aufgrund der eingeschränkten Farbwiedergabe von der Verwendung dieser Eigenschaften in Stylesheets für handheld abgeraten werden.

Weitere Charakteristika

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.

Ausgangswert

repeat

Berechneter Wert

Spezifizierter Wert

Vererbung

Nein

Anwendbarkeit

Auf alle Elemente

%-Bezugswert

Nicht zutreffend

Mediengruppe(n)

Visual