Cafedev chia sẻ về background-attachment, cách viết nhanh gọn và một số thuộc tính background khác trong CSS cũng rất hưu ích cho ace khi làm việc với background.

1. background-attachment

Thuộc tính background-attachment xác định xem hình nền sẽ cuộn hay được sửa (sẽ không cuộn với phần còn lại của trang):

Ví dụ: Chỉ định rằng hình nền phải được sửa:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  margin-right: 200px;
  background-attachment: fixed;
}
</style>
</head>
<body>

<h1>The background-attachment Property</h1>

<p>The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page).</p>

<p><strong>Tip:</strong> If you do not see any scrollbars, try to resize the browser window.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>

</body>
</html>

Copy and chạy code

Ví dụ: Chỉ định rằng hình nền sẽ cuộn với phần còn lại của trang:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  margin-right: 200px;
  background-attachment: scroll;
}
</style>
</head>
<body>

<h1>The background-attachment Property</h1>

<p>The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page).</p>

<p><strong>Tip:</strong> If you do not see any scrollbars, try to resize the browser window.</p>

<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>

</body>
</html>

Copy and chạy code

2. Viết nhanh gọn với background

Để rút ngắn mã, cũng có thể chỉ định tất cả các thuộc tính nền trong một thuộc tính duy nhất. Đây được gọi là một thuộc tính shorthand.

Thay vì viết:

body {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Bạn có thể sử dụng nền thuộc tính tốc ký(shorthand property) background:




Ví dụ: Sử dụng thuộc tính tốc ký để đặt thuộc tính nền trong một khai báo:

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

Lưu ý: Khi sử dụng thuộc tính tốc ký, thứ tự của các giá trị thuộc tính là:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Không có vấn đề gì nếu một trong các giá trị thuộc tính bị thiếu, miễn là các giá trị khác theo thứ tự này. Lưu ý rằng chúng tôi không sử dụng thuộc tính đính kèm nền trong các ví dụ ở trên, vì nó không có giá trị.

3. Tất cả các thuộc tính nền CSS

Thuộc tínhMô tả
backgroundĐặt tất cả các thuộc tính nền trong một khai báo
background-attachment. Đặt xem hình nền có cố định hay cuộn với phần còn lại của trang
background-clipChỉ định vùng vẽ của nền
background-colorĐặt màu nền của một phần tử
background-imageĐặt hình nền cho một phần tử
background-originChỉ định vị trí (các) hình nền được định vị
background-positionĐặt vị trí bắt đầu của ảnh nền
background-repeatĐặt cách lặp lại một hình ảnh nền
background-sizeChỉ định kích thước của hình ảnh nền

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!