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, chi tiết như nào hãy cùng chúng tôi phân tích:

Thuộc tính background-position trong CSS

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>

Chạy Thử

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>

Chạy Thử

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>

Chạy Thử

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>

Chạy Thử

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>

Chạy Thử

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.

5/5 - (1 Đánh giá)
0 Bình luận

Bùi Tấn Lực

CEO Bùi Tấn Lực người sáng lập ra Web Mới, là một lập trình viên website, người viết content, chuyên tư vấn các vấn đề về website và SEO website

Chia sẻ nội dung đánh giá của bạn về Thuộc tính background-position trong CSS
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 *

Bình luận, Hỏi đáp

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn