Bùi Tấn Lực - 176
- 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:
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>
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>
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>
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>
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>
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;
}
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.
- 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-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 *
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
