Thuộc tính background-size CSS

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

background-size Thuộc tính quy định kích thước của hình ảnh nền.

Xin xem thêm:

Hướng dẫn CSS:BG CSS、Nền CSS (Cao cấp)

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

Ví dụ

Định nghĩa kích thước của hình ảnh nền:

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

Thử ngay

Cú pháp CSS

background-size: length|percentage|cover|contain;

Giá trị thuộc tính

Giá trị Mô tả Kiểm tra
length

Thiết lập chiều cao và chiều rộng của hình ảnh nền.

Giá trị đầu tiên thiết lập chiều rộng, giá trị thứ hai thiết lập chiều cao.

Nếu chỉ đặt một giá trị, giá trị thứ hai sẽ được đặt là "auto".

 Kiểm tra
percentage

Thiết lập chiều rộng và chiều cao của hình ảnh nền bằng phần trăm của phần tử cha.

Giá trị đầu tiên thiết lập chiều rộng, giá trị thứ hai thiết lập chiều cao.

Nếu chỉ đặt một giá trị, giá trị thứ hai sẽ được đặt là "auto".

 Kiểm tra
cover

Mở rộng hình ảnh nền đến đủ lớn để hình ảnh nền hoàn toàn che盖 khu vực nền.

Một số phần của hình ảnh nền có thể không hiển thị trong khu vực định vị nền.

 Kiểm tra
contain Mở rộng hình ảnh để đạt kích thước lớn nhất, làm cho chiều rộng và chiều cao hoàn toàn phù hợp với khu vực nội dung. Kiểm tra

Chi tiết kỹ thuật

Giá trị mặc định: auto
Kế thừa: no
Phiên bản: CSS3
Cú pháp JavaScript: object.style.backgroundSize="60px 80px"

Các ví dụ khác

Co giãn hình ảnh nền
Co giãn hình ảnh nền để hoàn toàn che盖 khu vực nội dung.
Co giãn hình ảnh nền sao chép hình ảnh nền ngang bốn lần
Co giãn hình ảnh nền để hình ảnh nền được sao chép ngang bốn lần chính xác.

Hỗ trợ trình duyệt

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

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
4.0
1.0 -webkit-		 9.0 4.0
3.6 -moz-		 4.1
3.0 -webkit-		 10.5
10.0 -o-