Thuộc tính background-origin

Thuộc tính background-origin xác định cách hình nền (chính là hình ảnh, không phải màu nền) sẽ được đặt tương đối với phần tử: một phần hình nền sẽ tràn xuống dưới đường viền, hình nền sẽ không tràn xuống dưới đường viền hoặc hình nền sẽ chỉ được đặt trên phần nội dung của phần tử (tức là padding sẽ đẩy lùi hình nền).

Cú pháp

bộ chọn {
	background-origin: padding-box | border-box | content-box;
}

Giá trị

Giá trị	Mô tả
`border-box`	Hình nền sẽ tràn xuống dưới đường viền.
`padding-box`	Hình nền sẽ không tràn xuống dưới đường viền.
`content-box`	Hình nền sẽ chỉ nằm trên phần nội dung.

Giá trị mặc định: padding-box.

Lưu ý

Thuộc tính background-origin không hoạt động, khi background-attachment có giá trị fixed. Đồng thời, khi background-repeat có giá trị repeat, thuộc tính background-origin luôn hoạt động như với giá trị border-box.

Ví dụ . Mặc định

Mặc định, hình nền sẽ không tràn xuống dưới đường viền:

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

#elem {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

Ví dụ . Giá trị border-box

Bây giờ hình nền sẽ tràn xuống dưới đường viền:

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

#elem {
	background-origin: border-box;
	background-image: url("bg.png");
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

Ví dụ . Giá trị content-box

Và bây giờ hình nền sẽ bị đẩy lùi bởi padding:

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

#elem {
	background-origin: content-box;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

Ví dụ . Khi background-repeat: repeat

Khi background-repeat có giá trị repeat, thuộc tính background-origin luôn hoạt động như với giá trị border-box, tức là hình nền luôn tràn xuống dưới đường viền:

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

#elem {
	background-repeat: repeat;
	background-image: url("bg.png");
	border: 10px dashed black;
	padding: 30px;
	width: 350px;
	height: 300px;
}

Xem thêm

thuộc tính background-clip,
xác định vị trí của cả hình nền và màu nền
thuộc tính background,
là thuộc tính viết tắt cho các thuộc tính nền