Thuộc tính background-attachment

Thuộc tính background-attachment thiết lập cách cuộn ảnh nền của phần tử: cùng với văn bản hay để văn bản trượt trên ảnh.

Cú pháp

bộ chọn {
	background-attachment: fixed | scroll | local;
}

Giá trị

Giá trị	Mô tả
`fixed`	Ảnh nền sẽ cố định, còn văn bản sẽ trượt trên nó.
`scroll`	Ảnh nền sẽ cuộn cùng với văn bản.
`local`	Nền được cố định có xét đến hành vi của phần tử. Nếu phần tử có thanh cuộn, thì nền sẽ cuộn cùng với nội dung, nhưng phần nền vượt ra ngoài khung phần tử thì vẫn giữ nguyên vị trí.

Giá trị mặc định: scroll.

Ví dụ . Giá trị scroll

Hiện tại thuộc tính background-attachment được đặt thành giá trị scroll. Hãy cuộn phần tử theo chiều dọc - bạn sẽ thấy văn bản cuộn cùng với nền:

<body>
	<div id="elem">
		some long text
	</div>
</body>

body {
	background-attachment: scroll;
	background-image: url("bg.png");
}

#elem {
	width: 400px;
	margin: 0 auto;
	text-align: justify;
	font-weight: bold;
	font-size: 20px;
}

Ví dụ . Giá trị fixed

Và bây giờ thuộc tính background-attachment được đặt thành giá trị fixed. Hãy cuộn phần tử theo chiều dọc - bạn sẽ thấy văn bản trượt trên nền:

<body>
	<div id="elem">
		some long text
	</div>
</body>

body {
	background-attachment: fixed;
	background-image: url("bg.png");
}

#elem {
	width: 400px;
	margin: 0 auto;
	text-align: justify;
	font-weight: bold;
	font-size: 20px;
}

Xem thêm

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