Để xác định vị trí hiển thị của hình ảnh nền, bạn sử dụng thuộc tính backgroundPosition (viết hoa chữ P: backgroundPosition, không phải backgroundposition). Thuộc tính này chấp nhận các từ khóa, giá trị phần trăm hoặc đơn vị độ dài.
Ví dụ minh họa
Mã sau đặt hình nền cho body và định vị nó ở góc trên bên phải khi nhấn nút:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-repeat: no-repeat;
min-height: 100vh; /* Đảm bảo body có chiều cao để thấy hình nền */
}
</style>
</head>
<body>
<button onclick="setBgPosition()">Đặt vị trí hình nền</button>
<script>
function setBgPosition() {
document.body.style.backgroundImage = "url('https://www.tutorialspoint.com/html5/images/html5-mini-logo.jpg')";
document.body.style.backgroundPosition = "top right";
// Hoặc dùng phần trăm: "100% 0%"
// Hoặc dùng pixel: "50px 20px"
}
</script>
</body>
</html>
Cú pháp và giá trị thường dùng
backgroundPosition: x y; — Trong đó x là vị trí ngang, y là vị trí dọc.
| Cách viết | Ví dụ | Ý nghĩa |
|---|---|---|
| Từ khóa | top left, center center, bottom right | Căn theo góc/cạnh |
| Phần trăm | 50% 50% | 50% chiều rộng, 50% chiều cao (trung tâm) |
| Đơn vị độ dài | 20px 10px | Cách lề trái 20px, cách lề trên 10px |
| Kết hợp | right 20px bottom 10px | Cách phải 20px, cách dưới 10px (CSS3) |
Lưu ý: Nếu chỉ cung cấp một giá trị, giá trị thứ hai mặc định là center. Ví dụ: "right" tương đương "right center".