Thuộc tính backgroundPosition đặt vị trí khởi đầu của hình nền so với gốc tọa độ (góc trên-trái). Có thể dùng từ khóa, pixel, hoặc phần trăm.
Cú pháp
object.style.backgroundPosition = value
Các giá trị
| Giá trị | Mô tả |
|---|---|
| top left top center top right center left center center center right bottom left bottom center bottom right | Từ khóa vị trí. Chỉ viết một từ khóa thì giá trị còn lại mặc định là center. |
| xpos ypos | Vị trí tuyệt đối (px, em...). Gốc (0,0) ở góc trên-trái. |
| x% y% | Vị trí phần trăm. (0%,0%) = trên-trái, (100%,100%) = dưới-phải. Một giá trị = 50% cho trục kia. |
| initial | Đặt về mặc định. |
| inherit | Kế thừa từ cha. |
Ví dụ
Thay đổi vị trí hình nền body:
<!DOCTYPE html> <html> <head> <style>
body {
background-image: url("https://www.tutorialspoint.com/power_bi/images/power-bi-minilogo.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 20% 60%;
}
</style>
<script>
function changeBackPosition(){
document.body.style.backgroundPosition = "top right";
document.getElementById("Sample").innerHTML = "Vị trí hình nền đã thay đổi";
}
</script> </head>
<body>
<h2>Học tập vui vẻ</h2>
<p>Học miễn phí cho tất cả...</p>
<p>Nhấn nút để đổi vị trí hình nền</p>
<button onclick="changeBackPosition()">THAY ĐỔI VỊ TRÍ</button>
<p id="Sample"></p>
</body> </html>
Kết quả
Vị trí ban đầu 20% 60%:
Sau khi nhấn nút: top right:
