Thuộc tính background-position trong CSS
Bùi Tấn Lực - 871
- 04/10/2025
Chức năng của Thuộc tính background-position trong CSS
Thuộc tính background-position trong CSS dùng để lấy vị trí của hình nền đặt vào vị trí của phần tử HTML (nếu kích thước hình nền nhỏ thì sẽ dễ thấy hơn).
Code Thuộc tính background-position trong CSS
Thuộc tính background-position center trong CSS
Lấy phần giữa của hình nền:
background-position: center;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-position 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*/
background-size: cover; /*Cắt bớt 1 số phần hình ảnh, thay đối kích thước để bao phủ toàn bộ phần tử HTML*/
color:red;
}
</style>
</head>
<body>
<h1>Thuộc tính background-position center trong CSS</h1>
<p>Lấy phần giữa của hình nền: background-position: center;</p>
<div id="mtdiv" style="background-position: center;">
<p>Lấy phần giữa của hình nền</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 center top trong CSS
Lấy phần giữa trên của hình nền canh vào phần giữa trên của phần tử HTML (Nếu hình nền nhỏ):
background-position: center top;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-position center top 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*/
background-size: cover; /*Cắt bớt 1 số phần hình ảnh, thay đối kích thước để bao phủ toàn bộ phần tử HTML*/
color:red;
}
</style>
</head>
<body>
<h1>Thuộc tính background-position center top trong CSS</h1>
<p>Lấy phần giữa trên của hình nền canh vào phần giữa trên của phần tử HTML (Nếu hình nền nhỏ): background-position: center top;</p>
<div id="mtdiv" style="background-position: center top;">
<p>Lấy phần giữa trên của hình nền canh vào phần giữa trên của phần tử HTML (Nếu hình nền nhỏ):</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 bottom right trong CSS
Lấy phần phải dưới của hình nền canh vào phần phải dưới của phần tử HTML (Nếu hình nền nhỏ):
background-position: bottom right;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-position bottom right 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*/
background-size: cover; /*Cắt bớt 1 số phần hình ảnh, thay đối kích thước để bao phủ toàn bộ phần tử HTML*/
color:red;
}
</style>
</head>
<body>
<h1>Thuộc tính background-position bottom right trong CSS</h1>
<p>Lấy phần phải dưới của hình nền canh vào phần phải dưới của phần tử HTML (Nếu hình nền nhỏ): background-position: bottom right;</p>
<div id="mtdiv" style="background-position: bottom right;">
<p>Lấy phần phải dưới của hình nền canh vào phần phải dưới của phần tử HTML (Nếu hình nền nhỏ)</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 bằng phần trăm trong CSS
Lấy vị trí phần trăm của hình nền canh vào vị trí phần trăm của phần tử HTML (Nếu hình nền nhỏ):
background-position: 50% 50%;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-position 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*/
background-size: cover; /*Cắt bớt 1 số phần hình ảnh, thay đối kích thước để bao phủ toàn bộ phần tử HTML*/
color:red;
}
</style>
</head>
<body>
<h1>Thuộc tính background-position bằng phần trăm trong CSS</h1>
<p>Lấy vị trí phần trăm của hình nền canh vào vị trí phần trăm của phần tử HTML (Nếu hình nền nhỏ): background-position: 50% 50%;</p>
<div id="mtdiv" style="background-position: 50% 50%;">
<p>Lấy vị trí phần trăm của hình nền canh vào vị trí phần trăm của phần tử HTML (Nếu hình nền nhỏ)</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 bằng px trong CSS
Tạo khoảng trắng từ trái qua ở vị trí 1, tạo khoảng trắng từ trên xuống ở vị trí 2:
background-position: 100px 250px;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-position 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 bằng px trong CSS</h1>
<p>Tạo khoảng trắng từ trái qua ở vị trí 1, tạo khoảng trắng từ trên xuống ở vị trí 2: background-position: 100px 250px;</p>
<div id="mtdiv" style="background-position: 100px 250px; ">
<p>Tạo khoảng trắng từ trái qua ở vị trí 1, tạo khoảng trắng từ trên xuống ở vị trí 2</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 hiệu quả trong thiết kế website
Việc chọn đúng vị trí cho hình nền giúp nội dung quan trọng trong ảnh luôn nằm ở vùng dễ nhìn, đồng thời tạo bố cục cân đối cho từng khu vực trên website. Khi sử dụng background-position, nên xác định trước điểm cần ưu tiên hiển thị thay vì chỉ căn ảnh theo cảm tính.
Kết hợp background-position với background-size để căn chỉnh hình nền
background-position xác định vị trí của hình nền, còn background-size quyết định kích thước hiển thị của ảnh. Hai thuộc tính này thường được sử dụng cùng nhau để kiểm soát phần hình ảnh xuất hiện trong một khu vực có kích thước cố định.
Chẳng hạn, với ảnh banner có chủ thể nằm lệch về bên phải, có thể dùng background-size: cover để ảnh phủ kín khu vực và chọn vị trí phù hợp để hạn chế việc chủ thể bị cắt khỏi khung hình.
.banner {
background-image: url("banner.jpg");
background-size: cover;
background-position: right center;
}
Cách kết hợp này đặc biệt hữu ích với banner, ảnh giới thiệu sản phẩm hoặc khu vực hình nền lớn. Tuy nhiên, cover có thể làm một phần ảnh bị cắt khi tỷ lệ giữa ảnh và khung chứa khác nhau, vì vậy cần kiểm tra vị trí hiển thị trên nhiều kích thước màn hình.
Điều chỉnh vị trí hình nền phù hợp trên màn hình điện thoại
Vị trí hình nền phù hợp trên máy tính chưa chắc cho kết quả tốt trên điện thoại. Do không gian hiển thị bị thu hẹp, những khu vực quan trọng của ảnh có thể bị đẩy ra ngoài hoặc bị che khuất.
Có thể thay đổi background-position trong media query để ưu tiên phần hình ảnh cần giữ lại trên màn hình nhỏ.
.banner {
background-position: center center;
}
@media (max-width: 768px) {
.banner {
background-position: 70% center;
}
}
Giá trị cụ thể nên được lựa chọn dựa trên nội dung thực tế của hình ảnh. Nếu chủ thể nằm lệch về một phía, việc điều chỉnh vị trí theo phần trăm thường linh hoạt hơn so với chỉ sử dụng các từ khóa như left, center hoặc right.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính background-position 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 *
