Thuộc tính backgroundAttachment quyết định hình nền có cuộn cùng nội dung trang hay cố định so với viewport.
Cú pháp
object.style.backgroundAttachment = "scroll|fixed|local|initial|inherit"
Các giá trị
| Giá trị | Mô tả |
|---|---|
| scroll | Hình nền cuộn cùng trang (mặc định). |
| fixed | Hình nền cố định so với viewport (parallax effect). |
| local | Hình nền cuộn cùng nội dung element (khi element có scroll). |
| initial | Đặt về mặc định. |
| inherit | Kế thừa từ cha. |
Ví dụ
Thay đổi attachment của body:
<!DOCTYPE html> <html> <head> <style>
body {
background-image: url("https://www.tutorialspoint.com/artificial_intelligence_with_python/images/artificialintelligence-with-python-mini-logo.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top;
}
article { color: white; background: rgba(0,0,0,0.4); }
</style>
<script>
function changeAttachment(){
document.getElementById("BODY1").style.backgroundAttachment = "local";
document.getElementById("Sample").innerHTML = "Hình nền sẽ cuộn cùng nội dung trang.";
}
</script> </head>
<body id="BODY1">
<h2>Demo Heading</h2>
<p>Nội dung dài để cuộn...</p>
<!-- nhiều nội dung hơn -->
<p>Nhấn nút để thay đổi background-attachment</p>
<button onclick="changeAttachment()">THAY ĐỔI ATTACHMENT</button>
<p id="Sample"></p>
</body> </html>
Kết quả
Ban đầu fixed (hình nền đứng yên khi cuộn):
Sau khi nhấn nút local (hình nền cuộn cùng nội dung):
