Thuộc tính background-size trong CSS

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

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:

background-size: 300px 300px;

<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-size bằng px trong CSS</title>
<style>
body {
  background: url(https://webmoi.vn/thumuc/ceo-bui-tan-luc.jpg);
  background-repeat: no-repeat;
  color:red;
  font-weight:bold;
  font-size: 21px;
}
</style>
</head>
<body style="background-size: 300px 300px;">

<h1>Thuộc tính background-size bằng px trong CSS</h1>

<p>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</p>

</body>
</html>

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:

background-size: 300px 300px;

background-size: 100% 100%;

<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-size bằng phần trăm trong CSS</title>
<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;
  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;
  color:red;
}
</style>
</head>
<body>

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

<p>Giá trị 1 là chiều rộng, giá trị 2 là chiều cao:</p>

<div id="mtdiv" style="background-size: 100% 100%;">background-size: 100% 100%;</div>

<div id="mtdivhai" style="background-size: 300px 300px;">background-size: 300px 300px;</div>

</body>
</html>

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:

background-size: auto;

<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-size auto trong CSS</title>
<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;
  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-repeat: no-repeat;
  color:red;
}
</style>
</head>
<body>

<h1>Thuộc tính background-size auto trong CSS</h1>

<div id="mtdiv" style="background-size: auto;">background-size: auto;</div>

<div id="mtdivhai" style="background-size: auto;">background-size: auto;</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-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:

background-size: cover;

<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-size cover trong CSS</title>
<style>
#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;
  color:red;
}
</style>
</head>
<body>

<h1>Thuộc tính background-size cover trong CSS</h1>

<p>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:</p>

<div id="mtdiv" style="background-size: cover;">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</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-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:

background-size: contain;

<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-size contain trong CSS</title>
<style>
#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;
  color:red;
}
</style>
</head>
<body>

<h1>Thuộc tính background-size contain trong CSS</h1>

<p>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:</p>

<div id="mtdiv" style="background-size: contain;">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</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-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ử

Cách sử dụng background-size hiệu quả trong thiết kế website

Chọn background-size phù hợp với từng loại hình nền

Việc chọn giá trị background-size nên dựa vào mục đích sử dụng và tỷ lệ của hình ảnh. Với ảnh cần hiển thị đầy đủ, contain phù hợp hơn vì hạn chế tình trạng mất nội dung. Ngược lại, cover thích hợp cho banner, ảnh tiêu đề hoặc khu vực cần phủ kín toàn bộ phần tử.

Nếu kích thước hình nền cần kiểm soát chính xác, có thể sử dụng đơn vị như px, % hoặc kết hợp hai giá trị chiều rộng và chiều cao. Cách này phù hợp với những giao diện có yêu cầu cụ thể về kích thước hình ảnh.

Xử lý hình nền bị méo, cắt hoặc để trống

Hình nền bị méo thường xảy ra khi đặt chiều rộng và chiều cao theo các tỷ lệ khác nhau. Trong trường hợp này, nên ưu tiên cover hoặc contain để trình duyệt duy trì tỷ lệ gốc của hình ảnh.

Với cover, một phần hình ảnh có thể bị cắt để lấp đầy khu vực hiển thị. Nếu nội dung quan trọng nằm ở một vị trí cố định, nên kết hợp thêm background-position để điều chỉnh vùng hình ảnh được nhìn thấy. Với contain, hình ảnh được giữ nguyên tỷ lệ nhưng có thể xuất hiện khoảng trống nếu tỷ lệ giữa ảnh và phần tử không giống nhau.

Kết hợp background-size với background-position và background-repeat

background-size thường phát huy hiệu quả tốt hơn khi được sử dụng cùng các thuộc tính hình nền khác. background-position kiểm soát vị trí hiển thị, còn background-repeat quyết định hình nền có được lặp lại hay không.

Ví dụ, khi tạo một banner có ảnh phủ kín khu vực nhưng muốn giữ chủ thể ở chính giữa, có thể kết hợp cover với center:

.banner {
  background-image: url("banner.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Cách kết hợp này giúp hình nền thích ứng tốt hơn với nhiều kích thước màn hình, đồng thời hạn chế hiện tượng lặp ảnh hoặc vị trí chủ thể bị lệch khi giao diện thay đổi.

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.

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

Bùi Tấn Lực

Tìm hiểu về CEO Bùi Tấn Lực, Founder Web Mới với nhiều năm kinh nghiệm trong lĩnh vực phát triển website, SEO và chia sẻ kiến thức công nghệ

Đánh giá

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 *

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

Yêu Cầu Báo Giá

Gửi trang web mẫu cần làm theo, chúng tôi sẽ báo giá đến bạn từ Email (tanlucit09@gmail.com - Bùi Tấn Lực) hoặc Zalo (Lực IT - 0398259259) !