Thuộc tính background-image trong CSS

Bùi Tấn Lực
948
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>

Chạy Thử

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>

Chạy Thử

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>

Chạy Thử

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>

Chạy Thử

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>

Chạy Thử

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>

Chạy Thử

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>

Chạy Thử

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>

Chạy Thử

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>

Chạy Thử

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>

Chạy Thử

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.

★★★★★ ★★★★★
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ệ

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 *

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

Đăng ký tư vấn thiết kế website

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn