Thuộc tính background CSS

Định nghĩa và cách sử dụng

background Thuộc tính viết tắt để thiết lập tất cả các thuộc tính nền trong một dòng.

Bạn có thể thiết lập các thuộc tính sau đây:

Nếu không thiết lập một trong số các giá trị đó, cũng không có vấn đề gì, ví dụ background:#ff0000 url('smiley.gif'); cũng được phép.

Thường được khuyến nghị sử dụng thuộc tính này thay vì sử dụng từng thuộc tính đơn lẻ, vì thuộc tính này được hỗ trợ tốt hơn trong các trình duyệt cũ và cần ít hơn số lượng ký tự phải nhập.

Xin xem thêm:

Hướng dẫn CSS:Bối cảnh CSS、CSS Nền (Cao cấp)

Hướng dẫn tham khảo HTML DOM:Thuộc tính background

Mẫu

Cách đặt tất cả các thuộc tính nền trong một biểu đạt:

body
  { 
  background: #00FF00 url(bgimage.gif) no-repeat fixed top;
  }

Thử nghiệm trực tiếp

Ngữ pháp CSS

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả CSS
background-color Định nghĩa màu nền cần sử dụng. 1
background-position Định nghĩa vị trí của ảnh nền. 1
background-size Định nghĩa kích thước của ảnh nền. 3
background-repeat Định nghĩa cách lặp lại ảnh nền. 1
background-origin Định nghĩa khu vực định vị của ảnh nền. 3
background-clip Định nghĩa khu vực vẽ của nền. 3
background-attachment Định nghĩa ảnh nền có cố định hay cuộn theo phần còn lại của trang. 1
background-image Định nghĩa ảnh nền cần sử dụng. 1
inherit Định nghĩa rằng cần phải kế thừa thiết lập thuộc tính background từ phần tử cha. 1

Chi tiết kỹ thuật

Giá trị mặc định: không được chỉ định
Thừa kế: không
Phiên bản: CSS1 + CSS3
Ngữ pháp JavaScript: object.style.background="white url(paper.gif) repeat-y"

Hỗ trợ trình duyệt

Số trong bảng biểu chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn thuộc tính này.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5