Thuộc tính background-size trong CSS

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

Thuộc tính background-size trong CSS dùng để quy định cách áp đặt diện tích của hình nền vào diện tích 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-size trong CSS

Chức năng của Thuộc tính background-size trong CSS

Thuộc tính background-size trong CSS dùng để quy định cách áp đặt diện tích của hình nền vào diện tích của phần tử HTML.

Code Thuộc tính background-size trong CSS

Thuộc tính background-size bằng px trong CSS

Kích thước của hình làm background thường phải cùng tỷ lệ với kích thước bằng px trong background-size, nếu không đúng tỷ lệ thì hình sẽ bị bóp méo:

body {
  background: url(https://webmoi.vn/thumuc/ceo-bui-tan-luc.jpg);
  background-repeat: no-repeat;
  background-size: 300px 300px;
}

Chạy Thử

Thuộc tính background-size bằng phần trăm trong CSS

Quy định chiều rộng và chiều cao trên phần tử HTML mà background hiện:

<style>
#mtdiv {
  background: url(https://webmoi.vn/thumuc/ceo-bui-tan-luc.jpg);
  border: 2px solid black;
  padding: 25px;
  min-height:450px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color:red;
  margin-bottom:10px;
}
#mtdivhai {
  background: url(https://webmoi.vn/thumuc/ceo-bui-tan-luc.jpg);
  border: 2px solid black;
  padding: 25px;
  min-height:450px;
  background-repeat: no-repeat;
  background-size: 300px 300px; /* giá trị 1 là chiều rộng, giá trị 2 là chiều cao*/
  color:red;
}
</style>

Chạy Thử

Thuộc tính background-size auto trong CSS

Kích thước phần tử HTML bao nhiêu thì nó lấy kích thước của hình ảnh bấy nhiêu:

<style>
#mtdiv {
  background: url(https://webmoi.vn/thumuc/ceo-bui-tan-luc.jpg);
  border: 2px solid black;
  padding: 25px;
  min-height:450px;
  background-repeat: no-repeat;
  background-size: auto;
  color:red;
  margin-bottom:10px;
}
#mtdivhai {
  background: url(https://webmoi.vn/thumuc/ceo-bui-tan-luc.jpg);
  border: 2px solid black;
  padding: 25px;
  min-height:250px;
  background-size: auto;
  background-repeat: no-repeat;
  color:red;
}
</style>

Chạy Thử

Thuộc tính background-size cover trong CSS

Hình ảnh nền được thay đổi kích thước để bao phủ toàn bộ phần tử HTML, nó có thể cắt một phần hình ảnh hoặc kéo dài kích thước hình ảnh:

#mtdiv {
  background: url(https://webmoi.vn/thumuc/ceo-bui-tan-luc.jpg);
  border: 2px solid black;
  padding: 25px;
  min-height:300px;
  background-repeat: no-repeat;
  background-size: cover;
  color:red;
}

Chạy Thử

Thuộc tính background-size contain trong CSS

Nó lấy đúng tỷ lệ hình so với kích thước HTML, phần còn lại không đủ sẽ bỏ trống:

#mtdiv {
  background: url(https://webmoi.vn/thumuc/ceo-bui-tan-luc.jpg);
  border: 2px solid black;
  padding: 25px;
  min-height:300px;
  background-repeat: no-repeat;
  background-size: contain;
  color:red;
}

Chạy Thử

Thuộc tính background-size cover 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-size 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-size 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