Thuộc tính backgroundOrigin xác định điểm gốc (0,0) để đặt hình ảnh nền — tính từ border-box, padding-box hay content-box. Nó ảnh hưởng đến cách backgroundPosition được tính toán.
Ví dụ minh họa
Mã dưới đây thay đổi backgroundOrigin sang content-box khi nhấn nút, khiến hình nền dịch chuyển vào bên trong padding:
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: 2px dashed yellow;
padding: 35px;
width: 600px;
height: 400px;
background: url('https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg') no-repeat;
background-origin: border-box; /* Mặc định: gốc tại viền ngoài */
}
</style>
</head>
<body>
<button onclick="changeOrigin()">Đặt gốc nền = content-box</button>
<div id="box">
Văn bản demo! Văn bản demo! Văn bản demo! Văn bản demo! Văn bản demo! Văn bản demo!
</div>
<script>
function changeOrigin() {
document.getElementById("box").style.backgroundOrigin = "content-box";
/* Giờ background-position: 0 0 sẽ bắt đầu từ góc content, không phải border */
}
</script>
</body>
</html>
Ba giá trị của backgroundOrigin
| Giá trị | Điểm gốc (0,0) | Mô tả |
|---|---|---|
border-box | Góc trên-trái của viền | Mặc định. Hình nền bắt đầu từ cạnh ngoài viền. |
padding-box | Góc trên-trái của padding | Hình nền bắt đầu từ cạnh trong viền (bỏ border). |
content-box | Góc trên-trái của content | Hình nền bắt đầu từ khu vực nội dung (bỏ border + padding). |
Mối quan hệ với backgroundClip:
backgroundOrigin quyết định đâu là điểm gốc để đặt hình.backgroundClip quyết định nền được vẽ đến đâu (cắt ở đâu).- Thường dùng cùng nhau:
background-origin: padding-box; background-clip: padding-box;để hình nền vừa khít trong padding.