Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> CSS

Cố định hình nền (fixed background) với CSS

Thuộc tính background-attachment: fixed

background-attachment: fixed khiến hình nền **không cuộn cùng nội dung**, luôn cố định tại vị trí trong viewport. Tạo hiệu ứng parallax đơn giản.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-image: url("https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jpg");
      background-repeat: no-repeat;
      background-attachment: fixed; /* Cố định hình nền */
      background-position: right top;
      min-height: 2000px; /* Tạo độ dài để cuộn */
    }
  </style>
</head>
<body>
  <h1>Hình nền cố định (không cuộn)</h1>
  <p>Cuộn trang để thấy hình nền đứng yên.</p>
</body>
</html>

Khi cuộn trang, hình nền đứng yên tại vị trí right top, nội dung trượt qua trên nó. Trên mobile, fixed đôi khi bị bỏ qua/tắt do hiệu năng, cần test kỹ.