Thuộc tính nền Style

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

background Thuộc tính được thiết lập hoặc trả về dưới dạng viết tắt tối đa tám thuộc tính nền riêng lẻ.

Bằng thuộc tính này, bạn có thể thiết lập/trả về một hoặc nhiều mục sau (theo bất kỳ thứ tự nào):

Thuộc tính DOM Thuộc tính CSS
backgroundAttachment background-attachment
backgroundClip background-clip
backgroundColor màu nền
backgroundImage background-image
backgroundOrigin background-origin
backgroundPosition background-position
backgroundRepeat background-repeat
backgroundSize background-size

Các thuộc tính trên cũng có thể được thiết lập bằng các thuộc tính phong cách riêng lẻ. Được khuyến khích sử dụng các thuộc tính riêng lẻ để đạt được khả năng kiểm soát tốt hơn cho các tác giả không phải là cao cấp.

Xem thêm:

Hướng dẫn CSS:Bối cảnh CSS

Hướng dẫn CSS3:Background CSS3

Hướng dẫn CSS:Thuộc tính background

Ví dụ

Đặt樣式 nền của tài liệu:

document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right top";

Thử ngay

Có thêm ví dụ TIY bên dưới trang.

Cú pháp

Trả về thuộc tính background:

object.style.background

Đặt thuộc tính background:

object.style.background = "color image repeat attachment position size origin clip|initial|inherit"

Giá trị thuộc tính

Giá trị Mô tả
color Đặt màu nền của phần tử.
image Đặt hình ảnh nền của phần tử.
repeat Đặt cách lặp lại hình ảnh nền.
attachment Đặt hình ảnh nền cố định hay cuộn theo trang.
position Đặt vị trí bắt đầu hình ảnh nền.
size Đặt kích thước hình ảnh nền.
origin Đặt vùng定位 nền.
clip Đặt vùng vẽ hình ảnh nền.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit Gia đình thuộc tính này từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định: mờ không lặp lại cuộn 0% 0% tự động padding-box border-box
Giá trị trả về: Chuỗi, biểu thị nền của phần tử.
Phiên bản CSS: CSS1 + các thuộc tính mới trong CSS3

Những ví dụ khác

Ví dụ 2

Thay đổi nền DIV:

document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";

Thử ngay

Mẫu 3

Đặt màu nền cho tài liệu:

document.body.style.backgroundColor = "red";

Thử ngay

Mẫu 4

Đặt hình nền cho tài liệu:

document.body.style.backgroundImage = "url('img_tree.png')";

Thử ngay

Mẫu 5

Đặt hình nền thành không lặp lại:

document.body.style.backgroundRepeat = "repeat-y";

Thử ngay

Mẫu 6

Đặt hình nền thành cố định (không cuộn):

document.body.style.backgroundAttachment = "fixed";

Thử ngay

Mẫu 7

Thay đổi vị trí của hình nền:

document.body.style.backgroundPosition = "top right";

Thử ngay

Mẫu 8

Trả về giá trị thuộc tính nền của tài liệu:

document.body.style.background;

Thử ngay

Hỗ trợ trình duyệt

background Là tính năng của CSS1 (1996).

Tất cả các trình duyệt đều hỗ trợ hoàn toàn nó:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ

Ghi chú

CSS3 (1999) đã thêm ba thuộc tính mới: