Thuộc tính background-position trong CSS

• Bùi Tấn Lực
• 23
• 04/10/2025

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:

#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-position: center; /*Lấy phần giữa của 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;
}

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ỏ):

#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-position: center top; /*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-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;
}

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ỏ):

#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-position: right bottom; /*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-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;
}

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ỏ):

#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-position: 50% 50%; /*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-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;
}

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:

#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-position: 100px 150px; /*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*/
  color:red;
}

Chạy Thử

Thuộc tính background-position canh giữa, full hình trong CSS

Căn giữa hình ảnh, thay đổi kích thước hình ảnh nền để bao phủ toàn bộ vùng chứa:

.hero-image {
  background-image: url("https://webmoi.vn/thumuc/ceo-bui-tan-luc.jpg");
  background-color: #cccccc;
  height: 500px;
  background-position: center; /*Căn giữa hình ảnh*/
  background-repeat: no-repeat;
  background-size: cover; /* Thay đổi kích thước hình ảnh nền để bao phủ toàn bộ vùng chứa */
  position: relative;
}

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.

Bùi Tấn Lực

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 *

Đă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