Eigenschaft background-repeat

Die Eigenschaft background-repeat legt fest, wie ein Hintergrundbild eines Elements wiederholt werden soll. Standardmäßig wird das Bild sowohl entlang der X- als auch der Y-Achse wiederholt, wodurch der gesamte verfügbare Bereich abgedeckt wird.

Syntax

Selektor {
	background-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round;
}

Werte

Wert	Beschreibung
`no-repeat`	Das Bild wird überhaupt nicht wiederholt.
`repeat-x`	Das Bild wird entlang der X-Achse wiederholt.
`repeat-y`	Das Bild wird entlang der Y-Achse wiederholt.
`repeat`	Das Bild wird entlang der X- und der Y-Achse wiederholt.
`space`	Das Bild wird so oft wiederholt, dass es den Bereich vollständig ausfüllt. Wenn dies nicht möglich ist, wird Leerraum zwischen den Bildern hinzugefügt.
`round`	Das Bild wird so wiederholt, dass eine ganze Anzahl von Bildern in den Bereich passt. Wenn dies nicht möglich ist, werden die Hintergrundbilder skaliert.

Standardwert: repeat - bedeckt den gesamten Bereich mit dem Muster.

Beispiel

Standardmäßig kachelt das Hintergrundbild den gesamten Element:

<div id="elem"></div>

#elem {
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Beispiel

Lassen Sie uns das Bild so einstellen, dass es nicht wiederholt wird:

<div id="elem"></div>

#elem {
	background-repeat: no-repeat;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Beispiel

Jetzt soll das Bild entlang der X-Achse wiederholt werden:

<div id="elem"></div>

#elem {
	background-repeat: repeat-x;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Beispiel

Und jetzt entlang der Y-Achse:

<div id="elem"></div>

#elem {
	background-repeat: repeat-y;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Beispiel

Die sich entlang der Achsen wiederholenden Bilder können mit der Eigenschaft background-position positioniert werden:

<div id="elem"></div>

#elem {
	background-repeat: repeat-y;
	background-position: top center;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Beispiel

Sehen wir uns an, wie der Wert space funktioniert:

<div id="elem"></div>

#elem {
	background-repeat: space;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Beispiel

Sehen wir uns an, wie der Wert round funktioniert:

<div id="elem"></div>

#elem {
	background-repeat: round;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Siehe auch

die Eigenschaft background,
die eine Kurzform für Hintergrundeigenschaften darstellt