Thuộc tính backgroundSize xác định kích thước hình nền. Có thể dùng từ khóa (cover, contain), độ dài cụ thể, hoặc phần trăm.
Cú pháp
object.style.backgroundSize = "auto|length|cover|contain|initial|inherit"
Các giá trị
| Giá trị | Mô tả |
|---|---|
| auto | Hiển thị kích thước gốc (mặc định). |
| length | Chiều rộng và cao cụ thể (px, em...). Giá trị đầu tiên là width, thứ hai là height. Nếu chỉ một giá trị thì giá trị còn lại là auto. |
| percentage | Phần trăm so với kích thước container. Cách hiểu tương tự length. |
| cover | Phủ kín container, có thể cắt bớt ảnh. |
| contain | Vừa khít trong container, giữ tỷ lệ, có thể để trống vùng. |
| initial | Đặt về mặc định. |
| inherit | Kế thừa từ cha. |
Ví dụ
Thay đổi kích thước hình nền div:
<!DOCTYPE html> <html> <head> <style>
#DIV1 {
box-shadow: 0 2px 0 4px mintcream;
padding: 45px;
background: url("https://www.tutorialspoint.com/plsql/images/plsql-mini-logo.jpg");
background-size: 150px 150px;
}
</style>
<script>
function changeBackSize(){
document.getElementById("DIV1").style.backgroundSize = "100px 100px";
document.getElementById("Sample").innerHTML = "Kích thước hình nền đã giảm";
}
</script> </head>
<body>
<h2>Hướng dẫn PL/SQL</h2>
<div id="DIV1"></div>
<p>Nhấn nút để thay đổi kích thước hình nền</p>
<button onclick="changeBackSize()">THAY ĐỔI KÍCH THƯỚC</button>
<p id="Sample"></p>
</body> </html>
Kết quả
Hình nền 150x150px:
Sau khi nhấn nút: 100x100px:
