background-repeat

W powyższym przykładzie, czy zauważyłeś że standardowo obrazek powtarzał się w poziomie i w pionie i zakrywał całą stronę? Właściwość background-repeat kontroluje to zachowanie.

Tabela poniżej przedstawia cztery możliwe wartości dla właściwości background-repeat.

Wartośc Opis
Background-repeat: repeat-x powtarza się w poziomie
background-repeat: repeat-y powtarza się w pionie
background-repeat: repeat w poziomie oraz w pionie
background-repeat: no-repeat nie powtarza się

Na przykład, aby uniknąć powtarzania się obrazka w tle kod powinien wyglądać następująco:


body {
	background-color: #FFCC66;
	background-image: url("butterfly.gif");
	background-repeat: no-repeat;
}

h1 {
	color: #990000;
	background-color: #FC9804;
}