Thuộc tính CSS background - viết tắt cho tất cả thuộc tính nền

Thuộc tính background trong CSS

Thuộc tính background là shorthand (viết tắt) cho phép đặt tất cả các thuộc tính nền trong một khai báo duy nhất. Giúp code gọn gàng, dễ bảo trì hơn.

Các thuộc tính con được bao gồm

Thuộc tính	Mô tả
`background-color`	Màu nền
`background-image`	Hình ảnh nền
`background-repeat`	Cách lặp lại (repeat, no-repeat, repeat-x, repeat-y)
`background-attachment`	Cuộn cùng nội dung (scroll) hay cố định (fixed)
`background-position`	Vị trí ban đầu của hình nền

Thứ tự khuyến nghị

background: color image repeat attachment position;

Lưu ý: Thứ tự không quá quan trọng nhưng nên tuân theo quy ước để dễ đọc.

Ví dụ thực hành

<!DOCTYPE html>
<html>
<head>
  <style>
    #demo {
      background: lightblue url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg") no-repeat fixed top;
      min-height: 300px;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div id="demo">
    <h1>www.tutorialspoint.com</h1>
    <p>Ví dụ sử dụng background shorthand: màu nền lightblue, hình ảnh logo không lặp (no-repeat), cố định khi cuộn (fixed), vị trí top.</p>
  </div>
</body>
</html>

Lưu ý

Giá trị bị bỏ qua sẽ nhận giá trị mặc định
Có thể khai báo nhiều background layer bằng cách phân cách bằng dấu phẩy
Thuộc tính background-size và background-clip không nằm trong shorthand này (cần khai báo riêng)