Bùi Tấn Lực - 145
- 04/10/2025
Bùi Tấn Lực 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, chi tiết như nào hãy cùng chúng tôi phân tích:
Thuộc tính background-image trong CSS
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>
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
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-image 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
