Die Hintergrundwiederholungseigenschaft

CSS kann das von Ihnen angegebene Hintergrundbild wiederholen, um den gesamten Container auszufüllen. Tatsächlich ist dies das Standardverhalten, das für viele Situationen hervorragend geeignet ist. Auf diese Weise können Sie ein kleines, strukturiertes Hintergrundbild erstellen und es dann so oft wie nötig wiederholen lassen, um den verfügbaren Hintergrund auszufüllen. Wir haben dieses Verhalten bereits im ersten Beispiel gesehen, aber was sind die Alternativen?

Die Hintergrundwiederholung wird über die Background-Repeat-Eigenschaft gesteuert, die mehrere mögliche Werte aufweist. Hier ist ein Beispiel, das Ihnen alle zeigt:

<style type="text/css">
.box {
	background-image: url('http://css3-tutorial.net/images/blu_stripes.png');
	width: 200px;
	height: 150px;
	margin: 10px;
	border: 1px solid black;
	text-align: center;
	font-weight: bold;
	font-size: 2em;
}
</style>

<div class="box" style="background-repeat: repeat;">
	Repeat
</div>

<div class="box" style="background-repeat: repeat-x;">
	Repeat-X
</div>

<div class="box" style="background-repeat: repeat-y;">
	Repeat-Y
</div>

<div class="box" style="background-repeat: no-repeat;">
	No-Repeat
</div>

In der ersten Box verwenden wir den Standardwert von repeat, was im Grunde bedeutet, dass das Hintergrundbild in beide Richtungen wiederholt wird. In den nächsten beiden Feldern verwenden wir repeat-x und repeat-y - das erste Feld wiederholt den Hintergrund nur horizontal, während das letztere nur vertikal wiederholt wird. Das letzte Feld verwendet den Wert für die Nichtwiederholung. Das Bild wird also so angezeigt, wie es ist. In jedem Fall wird das Bild abgeschnitten, wenn der Hintergrund tatsächlich größer ist als das enthaltende Element. Es wird nur der erforderliche Teil davon verwendet, um das enthaltende Element auszufüllen, der Rest ist unsichtbar.

Zusammenfassung

Die Eigenschaft background-repeat ist sehr leistungsfähig und Sie können genau definieren, wie und selbst wann ein Hintergrundbild in einem Element wiederholt werden soll. In der fließenden Welt des Webdesigns, in der Elemente normalerweise keine feste Größe haben, ist dies wirklich großartig. Wenn Sie jedoch keine Wiederholungen wünschen, müssen Sie möglicherweise genauer steuern, wo der Hintergrund platziert wird. Dies kann mit der Eigenschaft background-position erreicht werden, auf die im nächsten Artikel eingegangen wird.