Bùi Tấn Lực
- 25
- 04/10/2025
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:
body {
background-image: url("https://webmoi.vn/thumuc/bg-nho.jpg");
background-color: #cccccc;
color:yellow
}
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:
body {
background-image: url("https://webmoi.vn/thumuc/bg-cay.png"), url("https://webmoi.vn/thumuc/bg-nho.jpg");
background-color: #cccccc;
color:yellow
}
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:
body {
background-image: url("https://webmoi.vn/thumuc/bg-cay.png"), url("https://webmoi.vn/thumuc/bg-nho.jpg");
background-repeat: no-repeat, repeat;
background-color: #cccccc;
color:yellow
}
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:
.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;
}
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:
#divbg{
height: 200px;
background-color: #cccccc;
background-image: linear-gradient(red, yellow);
}
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:
#divbg{
height: 200px;
background-color: #cccccc;
background-image: linear-gradient(red, yellow, green);
}
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:
#divbg{
height: 200px;
background-color: #cccccc;
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
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:
#divbg{
height: 200px;
background-color: #cccccc;
background-image: radial-gradient(red, yellow);
}
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:
#divbg{
height: 200px;
background-color: #cccccc;
background-image: radial-gradient(red, yellow, green);
}
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:
#divbg{
height: 200px;
background-color: #cccccc;
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
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 *