Thuộc tính background-position-y trong CSS
Bùi Tấn Lực - 879
- 04/10/2025
Chức năng của Thuộc tính background-position-y trong CSS
Thuộc tính background-position-y trong CSS dùng để lấy vị trí hình nền theo chiều dọc để đặt vào vị trí trên phần tử HTML theo chiều dọc.
Code Thuộc tính background-position-y trong CSS
Thuộc tính background-position-y center trong CSS
Lấy phần giữa chiều dọc của hình nền canh vào phần giữa chiều dọc của phần tử HTML:
background-position-y: center;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-position-y center trong CSS</title>
<style>
#mtdiv {
background-image: url(https://webmoi.vn/thumuc/ceo-bui-tan-luc.jpg);
border: 2px solid black;
padding: 25px;
min-height:300px;
background-repeat: no-repeat; /*Không lặp lại hình nền*/
background-attachment: fixed; /*Cho đứng hình nền*/
color:red;
}
</style>
</head>
<body>
<h1>Thuộc tính background-position-y center trong CSS</h1>
<p>Lấy phần giữa chiều dọc của hình nền canh vào phần giữa chiều dọc của phần tử HTML: background-position-y: center;</p>
<div id="mtdiv" style="background-position-y: center;">
<p>Lấy phần giữa chiều dọc của hình nền canh vào phần giữa chiều dọc của phần tử HTML</p>
</div>
<p><b>Hình gốc:</b></p>
<img src="https://webmoi.vn/thumuc/ceo-bui-tan-luc.jpg" style="width:100%; height:auto">
</body>
</html>
Thuộc tính background-position-y bottom trong CSS
Lấy phần bên dưới theo chiều dọc của hình nền canh vào phần bên dưới theo chiều dọc của phần tử HTML:
background-position-y: bottom;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-position-y bottom trong CSS</title>
<style>
#mtdiv {
background-image: url(https://webmoi.vn/thumuc/ceo-bui-tan-luc.jpg);
border: 2px solid black;
padding: 25px;
min-height:300px;
background-repeat: no-repeat; /*Không lặp lại hình nền*/
background-attachment: fixed; /*Cho đứng hình nền*/
color:red;
}
</style>
</head>
<body>
<h1>Thuộc tính background-position-y bottom trong CSS</h1>
<p>Lấy phần bên dưới theo chiều dọc của hình nền canh vào phần bên dưới theo chiều dọc của phần tử HTML: background-position-y: bottom;</p>
<div id="mtdiv" style="background-position-y: bottom;">
<p>Lấy phần bên dưới theo chiều dọc của hình nền canh vào phần bên dưới theo chiều dọc của phần tử HTML</p>
</div>
<p><b>Hình gốc:</b></p>
<img src="https://webmoi.vn/thumuc/ceo-bui-tan-luc.jpg" style="width:100%; height:auto">
</body>
</html>
Thuộc tính background-position-y bằng phần trăm trong CSS
Lấy vị trí % theo chiều dọc của hình nền canh vào vị trí % theo chiều dọc của phần tử HTML:
background-position-y: 100%;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-position-y bằng phần trăm trong CSS</title>
<style>
#mtdiv {
background-image: url(https://webmoi.vn/thumuc/ceo-bui-tan-luc.jpg);
border: 2px solid black;
padding: 25px;
min-height:300px;
background-repeat: no-repeat; /*Không lặp lại hình nền*/
background-attachment: fixed; /*Cho đứng hình nền*/
color:red;
}
</style>
</head>
<body>
<h1>Thuộc tính background-position-y bằng phần trăm trong CSS</h1>
<p>Lấy vị trí % theo chiều dọc của hình nền canh vào vị trí % theo chiều dọc của phần tử HTML: background-position-y: 100%;</p>
<div id="mtdiv" style="background-position-y: 100%;">
<p>Lấy vị trí % theo chiều dọc của hình nền canh vào vị trí % theo chiều dọc của phần tử HTML</p>
</div>
<p><b>Hình gốc:</b></p>
<img src="https://webmoi.vn/thumuc/ceo-bui-tan-luc.jpg" style="width:100%; height:auto">
</body>
</html>
Thuộc tính background-position-y bằng px trong CSS
Đặt hình nền tại vị trí px được chỉ định theo chiều dọc:
background-position-y: 200px;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-position-y bằng px trong CSS</title>
<style>
#mtdiv {
background-image: url(https://webmoi.vn/thumuc/ceo-bui-tan-luc.jpg);
border: 2px solid black;
padding: 25px;
min-height:300px;
background-repeat: no-repeat; /*Không lặp lại hình nền*/
background-attachment: fixed; /*Cho đứng hình nền*/
color:red;
}
</style>
</head>
<body>
<h1>Thuộc tính background-position-y bằng px trong CSS</h1>
<p>Đặt hình nền tại vị trí px được chỉ định theo chiều dọc: background-position-y: 200px;</p>
<div id="mtdiv" style="background-position-y: 200px;">
<p>Đặt hình nền tại vị trí px được chỉ định theo chiều dọc</p>
</div>
<p><b>Hình gốc:</b></p>
<img src="https://webmoi.vn/thumuc/ceo-bui-tan-luc.jpg" style="width:100%; height:auto">
</body>
</html>
Cách sử dụng background-position-y hiệu quả trong thiết kế giao diện
Trong giao diện thực tế, background-position-y không chỉ dùng để đưa ảnh nền lên hoặc xuống một khoảng cố định. Khi kết hợp với kích thước ảnh nền và bố cục linh hoạt, thuộc tính này giúp kiểm soát vùng hình ảnh được hiển thị mà không cần chỉnh sửa trực tiếp file ảnh.
Điều chỉnh vị trí ảnh nền theo từng thiết bị
Cùng một ảnh nền có thể hiển thị đẹp trên màn hình máy tính nhưng bị lệch trọng tâm khi chuyển sang điện thoại. Khi đó, có thể thay đổi background-position-y trong media query để đưa phần hình ảnh quan trọng về đúng vị trí.
.banner {
background-position-y: center;
}
@media (max-width: 768px) {
.banner {
background-position-y: 30%;
}
}
Cách này đặc biệt hữu ích với banner có chủ thể nằm lệch về phía trên hoặc phía dưới. Thay vì tạo nhiều phiên bản ảnh, chỉ cần điều chỉnh điểm neo theo kích thước màn hình.
Kết hợp background-position-y với background-size
Vị trí theo trục dọc phụ thuộc nhiều vào kích thước ảnh nền. Nếu sử dụng background-size: cover, trình duyệt có thể phóng to và cắt bớt ảnh để phủ kín vùng chứa. Lúc này, thay đổi background-position-y sẽ quyết định phần nào của ảnh được giữ lại trong khung.
.hero {
background-image: url("banner.jpg");
background-size: cover;
background-position-y: 40%;
}
Vì vậy, khi ảnh nền bị mất phần nội dung quan trọng sau khi thay đổi chiều cao khối, không nên chỉ điều chỉnh kích thước ảnh. Hãy kiểm tra đồng thời background-size và background-position-y để tìm điểm hiển thị phù hợp.
Xử lý ảnh nền khi kích thước khung chứa thay đổi
Khi chiều cao phần tử thay đổi theo nội dung, tỷ lệ hiển thị của ảnh nền cũng có thể thay đổi. Một giá trị cố định như 20px đôi khi không còn phù hợp với các màn hình khác nhau. Trong trường hợp cần bố cục linh hoạt, có thể sử dụng giá trị phần trăm hoặc kết hợp với các quy tắc responsive.
.cover-image {
background-size: cover;
background-position-y: 45%;
}
@media (max-width: 600px) {
.cover-image {
background-position-y: 35%;
}
}
Điểm quan trọng là xác định vùng nội dung cần ưu tiên thay vì cố định một con số cho mọi kích thước màn hình. Cách tiếp cận này giúp ảnh nền giữ được trọng tâm khi bố cục thay đổi, đồng thời hạn chế tình trạng chủ thể bị cắt khỏi vùng nhìn thấy.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính background-position-y trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
