Thuộc tính background-image trong CSS
Bùi Tấn Lực - 995
- 04/10/2025
Chức năng của Thuộc tính background-image trong CSS
Thuộc tính background-image trong CSS dùng để tạo hình nền cho phần tử HTML hoặc kết hợp nhiều màu sắc để tạo hình nền cho phần tử HTML.
Code Thuộc tính background-image trong CSS
Thuộc tính background-image mặc định trong CSS
background-image một hình nhỏ, không thêm thuộc tính khác, mặc định nó tự lặp lại:
background-image: url('https://webmoi.vn/thumuc/bg-nho.jpg');
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-image mặc định trong CSS</title>
<style>
body {
background-color: #cccccc;
color:yellow
}
</style>
</head>
<body style="background-image: url('https://webmoi.vn/thumuc/bg-nho.jpg');">
<h1>Thuộc tính background-image mặc định trong CSS</h1>
<p>Xin chào</p>
</body>
</html>
Thuộc tính background-image mặc định nhiều hình trong CSS
Hình nào đứng trước sẽ nằm trên hình đứng sau, 2 hình mặc định sẽ đều lặp:
background-image: url('https://webmoi.vn/thumuc/bg-cay.png'), url('https://webmoi.vn/thumuc/bg-nho.jpg');
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-image mặc định nhiều hình trong CSS</title>
<style>
body {
background-color: #cccccc;
color:yellow
}
</style>
</head>
<body style="background-image: url('https://webmoi.vn/thumuc/bg-cay.png'), url('https://webmoi.vn/thumuc/bg-nho.jpg');">
<h1>Thuộc tính background-image mặc định nhiều hình trong CSS</h1>
<p>Xin chào</p>
</body>
</html>
Thuộc tính background-image no-repeat, repeat trong CSS
Repeat vị trí 1 sẽ tương ứng hình 1, repeat vị trí 2 tương ứng với hình 2:
background-image: url('https://webmoi.vn/thumuc/bg-cay.png'), url('https://webmoi.vn/thumuc/bg-nho.jpg'); background-repeat: no-repeat, repeat;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-image no-repeat, repeat trong CSS</title>
<style>
body {
background-color: #cccccc;
color:yellow
}
</style>
</head>
<body style="background-image: url('https://webmoi.vn/thumuc/bg-cay.png'), url('https://webmoi.vn/thumuc/bg-nho.jpg'); background-repeat: no-repeat, repeat;">
<h1>Thuộc tính background-image no-repeat, repeat trong CSS</h1>
<p>Xin chào</p>
</body>
</html>
Thuộc tính background-image 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:
{
background-image: url("https://webmoi.vn/thumuc/ceo-bui-tan-luc.jpg");
background-position: center; /*Căn giữa hình ảnh*/
background-size: cover; /* Thay đổi kích thước hình ảnh nền để bao phủ toàn bộ vùng chứa */
}
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-image canh giữa, full hình trong CSS</title>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.hero-image {
background-color: #cccccc;
height: 500px;
background-image: url("https://webmoi.vn/thumuc/ceo-bui-tan-luc.jpg");
background-position: center; /*Căn giữa hình ảnh*/
background-size: cover; /* Thay đổi kích thước hình ảnh nền để bao phủ toàn bộ vùng chứa */
background-repeat: no-repeat;
position: relative;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
</style>
</head>
<body>
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">BÙI TẤN LỰC</h1>
<h3>Người Sáng lập Web Mới</h3>
<button>Xem Ngay</button>
</div>
</div>
<h1>Thuộc tính background-image canh giữa, full hình trong CSS</h1>
<p>Xin chào</p>
</body>
</html>
Thuộc tính background-image linear-gradient 2 màu trong CSS
Background tuyến tính từ trên xuống, chuyển dần từ màu đỏ sang màu vàng:
background-image: linear-gradient(red, yellow);
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-image linear-gradient 2 màu trong CSS</title>
<style>
#divbg{
height: 200px;
}
</style>
</head>
<body>
<h1>Thuộc tính background-image linear-gradient 2 màu trong CSS</h1>
<p>Background tuyến tính từ trên xuống, chuyển dần từ màu đỏ sang màu vàng:</p>
<div id="divbg" style="background-image: linear-gradient(red, yellow);"></div>
</body>
</html>
Thuộc tính background-image linear-gradient 3 màu trong CSS
Background tuyến tính từ trên xuống, chuyển dần từ màu đỏ sang màu vàng, sau đó chuyển dần sang màu xanh:
background-image: linear-gradient(red, yellow, green);
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-image linear-gradient 3 màu trong CSS</title>
<style>
#divbg{
height: 200px;
}
</style>
</head>
<body>
<h1>Thuộc tính background-image linear-gradient 3 màu trong CSS</h1>
<p>Background tuyến tính từ trên xuống, chuyển dần từ màu đỏ sang màu vàng, sau đó chuyển dần sang màu xanh:</p>
<div id="divbg" style="background-image: linear-gradient(red, yellow, green);"></div>
</body>
</html>
Thuộc tính background-image repeating-linear-gradient trong CSS
Background lặp lại các khối màu tuyến tính:
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-image repeating-linear-gradient trong CSS</title>
<style>
#divbg{
height: 200px;
}
</style>
</head>
<body>
<h1>Thuộc tính background-image repeating-linear-gradient trong CSS</h1>
<p>Background lặp lại các khối màu tuyến tính</p>
<div id="divbg" style="background-image: repeating-linear-gradient(red, yellow 10%, green 20%);"></div>
</body>
</html>
Thuộc tính background-image radial-gradient 2 màu trong CSS
Background bắt đầu từ màu đỏ ở tâm chuyển dần sang màu vàng ra ngoài:
background-image: radial-gradient(red, yellow);
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-image radial-gradient 2 màu trong CSS</title>
<style>
#divbg{
height: 200px;
}
</style>
</head>
<body>
<h1>Thuộc tính background-image radial-gradient 2 màu trong CSS</h1>
<p>Background bắt đầu từ màu đỏ ở tâm chuyển dần sang màu vàng ra ngoài:</p>
<div id="divbg" style="background-image: radial-gradient(red, yellow);"></div>
</body>
</html>
Thuộc tính background-image radial-gradient 3 màu trong CSS
Background bắt đầu từ màu đỏ ở tâm chuyển dần sang màu vàng rồi chuyển dần sang màu xanh ra ngoài:
background-image: radial-gradient(red, yellow, green);
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-image radial-gradient 3 màu trong CSS</title>
<style>
#divbg{
height: 200px;
}
</style>
</head>
<body>
<h1>Thuộc tính background-image radial-gradient 3 màu trong CSS</h1>
<p>Background bắt đầu từ màu đỏ ở tâm chuyển dần sang màu vàng rồi chuyển dần sang màu xanh ra ngoài:</p>
<div id="divbg" style="background-image: radial-gradient(red, yellow, green);"></div>
</body>
</html>
Thuộc tính background-image repeating-radial-gradient trong CSS
Lặp lại các khối màu từ tâm ra ngoài:
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-image repeating-radial-gradient trong CSS</title>
<style>
#divbg{
height: 200px;
}
</style>
</head>
<body>
<h1>Thuộc tính background-image repeating-radial-gradient trong CSS</h1>
<p>Lặp lại các khối màu từ tâm ra ngoài:</p>
<div id="divbg" style="background-image: repeating-radial-gradient(red, yellow 10%, green 15%);"></div>
</body>
</html>
Ứng dụng thực tế của thuộc tính background-image trong CSS
background-image phát huy hiệu quả nhất khi được sử dụng để xây dựng các khu vực trực quan trên giao diện thay vì chỉ đặt một hình ảnh đơn lẻ. Tùy mục đích, bạn có thể dùng ảnh nền cho banner, tạo lớp phủ giúp nội dung dễ đọc hoặc kết hợp nhiều lớp nền để tạo bố cục sinh động.
Tạo ảnh nền cho banner và khu vực Hero
Banner và khu vực Hero thường cần một hình ảnh bao phủ toàn bộ không gian phía sau tiêu đề, đoạn giới thiệu hoặc nút hành động. Khi đó, background-image cho phép đặt hình ảnh trực tiếp lên phần nền của một phần tử mà không làm phát sinh thêm phần tử ảnh trong cấu trúc HTML.
<div class="hero">
<h2>Thiết kế website hiện đại</h2>
<p>Xây dựng giao diện trực quan và phù hợp với nhiều thiết bị.</p>
</div>
<style>
.hero {
background-image: url("banner.jpg");
background-size: cover;
background-position: center;
padding: 100px 30px;
}
</style>
Cách kết hợp background-size: cover và background-position: center giúp hình ảnh lấp đầy khu vực hiển thị mà vẫn giữ tỷ lệ ban đầu. Đây là lựa chọn phù hợp cho những khu vực có kích thước thay đổi theo màn hình.
Kết hợp ảnh nền với màu phủ để làm nổi bật nội dung
Ảnh nền có nhiều chi tiết hoặc độ tương phản cao có thể khiến chữ phía trên khó đọc. Một cách xử lý hiệu quả là đặt thêm linear-gradient() cùng hình ảnh trong background-image, từ đó tạo một lớp phủ mà không cần chỉnh sửa trực tiếp file ảnh.
.hero {
background-image:
linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
url("banner.jpg");
background-size: cover;
background-position: center;
}
Lớp gradient có thể được điều chỉnh theo từng khu vực thay vì phủ đều toàn bộ ảnh. Chẳng hạn, phần tối hơn có thể tập trung về phía đặt tiêu đề để tăng độ tương phản, trong khi phần còn lại vẫn giữ được hình ảnh phía sau.
Tạo hiệu ứng nền bằng nhiều lớp hình ảnh và gradient
background-image hỗ trợ nhiều lớp nền, trong đó lớp được khai báo trước sẽ nằm phía trên lớp khai báo sau. Nhờ vậy, bạn có thể kết hợp hình ảnh, gradient hoặc nhiều hình ảnh để tạo một nền phức tạp mà không phải thêm nhiều phần tử vào HTML.
.section {
background-image:
linear-gradient(rgba(20, 30, 50, 0.7), rgba(20, 30, 50, 0.7)),
url("texture.png"),
url("background.jpg");
background-size: cover, auto, cover;
background-position: center, center, center;
}
Cách này đặc biệt hữu ích khi muốn tạo chiều sâu cho các khu vực như phần giới thiệu, banner hoặc khu vực nổi bật. Mỗi lớp có thể đảm nhiệm một vai trò riêng: gradient kiểm soát độ tương phản, họa tiết bổ sung chi tiết và ảnh chính tạo điểm nhấn thị giác.
Tạo giao diện nền phù hợp với từng kích thước màn hình
Một hình ảnh phù hợp trên màn hình lớn chưa chắc mang lại kết quả tốt trên điện thoại. Với background-image, bạn có thể thay đổi hình nền hoặc cách hiển thị nền thông qua media query, giúp giao diện phù hợp hơn với không gian thực tế của từng thiết bị.
.banner {
background-image: url("banner-desktop.jpg");
background-size: cover;
background-position: center;
}
@media (max-width: 768px) {
.banner {
background-image: url("banner-mobile.jpg");
background-position: center top;
}
}
Việc sử dụng một ảnh dành riêng cho màn hình nhỏ có thể giúp chủ thể trong ảnh được bố trí rõ ràng hơn, đồng thời tránh tình trạng hình nền bị cắt mất phần quan trọng khi không gian hiển thị bị thu hẹp.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính background-image trong CSS.
- 0 Bình luận
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 *
