Thuộc tính background-attachment trong CSS
Bùi Tấn Lực - 858
- 03/10/2025
Chức năng của Thuộc tính background-attachment trong CSS
Thuộc tính background-attachment trong CSS dùng để làm background đứng cố định khi cuộn trang hoặc chạy theo các phần tử con.
Code Thuộc tính background-attachment trong CSS
Thuộc tính background-attachment fixed trong CSS
background-attachment: fixed;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-attachment fixed trong CSS</title>
<style>
body {
background-image: url("https://webmoi.vn/thumuc/ceo-bui-tan-luc.jpg");
background-repeat: no-repeat;
color:#fff;
}
</style>
</head>
<body style="background-attachment: fixed;">
<h1>Thuộc tính background-attachment fixed trong CSS</h1>
<p>Hãy Chạy thử Thuộc tính background-attachment fixed trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả</p>
</body>
</html>
Thuộc tính background-attachment scroll trong CSS
background-attachment: scroll;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-attachment scroll trong CSS</title>
<style>
body {
background-image: url("https://webmoi.vn/thumuc/ceo-bui-tan-luc.jpg");
background-repeat: no-repeat;
color:#fff;
}
</style>
</head>
<body style="background-attachment: scroll;">
<h1>Thuộc tính background-attachment scroll trong CSS</h1>
<p>Hãy Chạy thử Thuộc tính background-attachment fixed trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả</p>
</body>
</html>
So sánh background-attachment fixed, scroll và local trong CSS
Ba giá trị fixed, scroll và local quyết định cách hình nền phản ứng khi người dùng cuộn nội dung. Hiểu rõ sự khác biệt giúp lựa chọn đúng kiểu hiển thị thay vì chỉ dựa vào hiệu ứng trực quan.
Background-attachment fixed hoạt động như thế nào?
Với fixed, hình nền được giữ cố định theo vùng nhìn của trình duyệt trong quá trình cuộn trang. Phần nội dung phía trước tiếp tục di chuyển, tạo cảm giác nền đứng yên và thường được dùng để tạo hiệu ứng thị giác cho banner hoặc khu vực giới thiệu.
background-attachment: fixed;
Cách này phù hợp với những khu vực cần tạo điểm nhấn nhưng không nên lạm dụng trên các thiết bị có hiệu năng thấp, bởi việc xử lý hình nền cố định có thể ảnh hưởng đến độ mượt khi cuộn.
Background-attachment scroll khác fixed ở điểm nào?
Giá trị scroll gắn hình nền với phần tử chứa nó. Khi người dùng cuộn trang, nền sẽ di chuyển cùng khu vực hiển thị thay vì duy trì vị trí cố định như fixed.
background-attachment: scroll;
Đây là lựa chọn phù hợp cho các khối nội dung thông thường vì cách hoạt động đơn giản, dễ kiểm soát và không tạo hiệu ứng nền cố định. Nếu không khai báo background-attachment, giá trị mặc định cũng là scroll.
Background-attachment local dùng trong trường hợp nào?
local phù hợp với phần tử có nội dung tự cuộn, chẳng hạn một hộp chứa văn bản dài. Khi phần tử được cuộn, hình nền sẽ di chuyển theo nội dung bên trong thay vì chỉ gắn với phần tử như cách scroll thể hiện.
background-attachment: local;
Giá trị này hữu ích khi hình nền cần thay đổi vị trí đồng thời với nội dung của một khu vực có thanh cuộn riêng. Vì vậy, local thường có ý nghĩa rõ rệt hơn trong các thành phần giao diện có vùng cuộn độc lập.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính background-attachment trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
