Thuộc tính background-repeat

Thuộc tính background-repeat xác định cách lặp lại hình nền của phần tử. Theo mặc định, hình ảnh được lặp lại theo cả trục X và trục Y, do đó bao phủ toàn bộ vùng có sẵn.

Cú pháp

bộ chọn {
	background-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round;
}

Giá trị

Giá trị	Mô tả
`no-repeat`	Hình ảnh sẽ không được lặp lại.
`repeat-x`	Hình ảnh sẽ được lặp lại theo trục X.
`repeat-y`	Hình ảnh sẽ được lặp lại theo trục Y.
`repeat`	Hình ảnh sẽ được lặp lại theo trục X và trục Y.
`space`	Hình ảnh sẽ lặp lại đủ số lần để lấp đầy vùng, nếu không thể, khoảng trống sẽ được thêm vào giữa các hình ảnh.
`round`	Hình ảnh sẽ lặp lại sao cho vùng chứa vừa đủ một số nguyên lần hình, nếu không thể, các hình nền sẽ được thu phóng.

Giá trị mặc định: repeat - bao phủ toàn bộ màn hình bằng hoa văn.

Ví dụ

Theo mặc định, hình nền sẽ lát kín toàn bộ phần tử:

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

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

Ví dụ

Hãy làm cho hình ảnh không lặp lại:

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

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

Ví dụ

Bây giờ hãy để hình ảnh lặp lại theo trục X:

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

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

Ví dụ

Và bây giờ theo trục Y:

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

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

Ví dụ

Các hình ảnh lặp lại theo trục có thể được định vị bằng thuộc tính background-position:

<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;
}

Ví dụ

Hãy xem giá trị space hoạt động như thế nào:

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

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

Ví dụ

Hãy xem giá trị round hoạt động như thế nào:

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

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

Xem thêm

thuộc tính background,
là thuộc tính viết tắt cho nền