background-image property cho phép bạn đặt một hoặc nhiều ảnh nền cho một phần tử. Nó cho phép bạn chỉ định URL ảnh và kết hợp các thuộc tính khác. Điều này giúp bạn kiểm soát vị trí, kích thước, lặp lại và cải thiện thiết kế trang web.
Cú pháp
element_selector {
background-image: url('image_url')| none | initial | inherit;
}Giá trị thuộc tính
Giá trị | Mô tả |
|---|---|
url('url') | Giá trị này chỉ định URL của hình ảnh. Để chỉ định URL của nhiều ảnh, hãy phân tách chúng bằng dấu phẩy. |
none | Đây là trường hợp mặc định, không có hình ảnh nào được hiển thị. |
initial | Nó được sử dụng để đặt thuộc tính về giá trị mặc định của nó. |
inherit | Nó kế thừa thuộc tính từ phần tử cha của nó. |
Thuộc tính background-image cũng có thể được sử dụng với các giá trị sau:
Giá trị | Mô tả |
|---|---|
Nó được dùng để thiết lập ảnh nền linear-gradient có ít nhất 2 màu từ trên xuống. | |
Nó được dùng để thiết lập ảnh nền radial-gradient có ít nhất 2 màu từ tâm ra ngoài. |
Ví dụ cơ bản
Ví dụ này minh họa thuộc tính background-image bằng cách đặt giá trị URL. Giá trị URL được đặt làm url.
HTML<!DOCTYPE html>
<html>
<head>
<title>background-image property</title>
<style>
body {
background-image: url("https://media.geeksforgeeks.org/wp-content/uploads/rk.png");
text-align: center;
}
h1,
h3 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>background-image:url;</h3>
<div>
GeeksforGeeks: A computer science portal for geeks
</div>
</body>
</html>
Đầu ra:
Các ví dụ về thuộc tính CSS background-image
Ví dụ 1: Ví dụ về background-image với vị trí nền ở giữa và không lặp lại.
HTML<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Align Items Example</title>
<style>
.image-prop {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20240722155354/geeksforgeeks3.png");
background-position: center;
background-repeat: no-repeat;
width: 30rem;
height: 25rem;
background-color: bisque;
}
h1,h3 {
color: black;
text-align: center;
}
</style>
</head>
<body>
<div class="image-prop">
<h1>GeeksforGeeks</h1>
<h3>background-image:url;</h3>
</div>
</body>
</html>
Đầu ra:
Ví dụ 2: Ví dụ về background-image với vị trí nền ở giữa, không lặp lại và cover.
HTML<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Align Items Example</title>
<style>
.image-prop {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20240722155354/geeksforgeeks3.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 30rem;
height: 27rem;
background-color: bisque;
}
h1,
h3 {
color: black;
text-align: center;
}
</style>
</head>
<body>
<div class="image-prop">
<h1>GeeksforGeeks</h1>
<h3>background-image:url;</h3>
<h3>background-position: center;</h3>
</div>
</body>
</html>
Đầu ra:
Ví dụ 3: Ảnh nền với none, ví dụ này minh họa thuộc tính background-image bằng cách đặt giá trị url thành none.
HTML<!DOCTYPE html>
<html>
<head>
<title>background-image property</title>
<style>
body {
background-image: url("https://media.geeksforgeeks.org/wp-content/uploads/rk.png") none;
}
h1,
h3 {
color: green;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>background-image:url none;</h3>
<div>
GeeksforGeeks: A computer science portal for geeks
</div>
</body>
</html>
Đầu ra:
Ví dụ 4: Thuộc tính background-image bằng cách đặt giá trị url là initial.
HTML<!DOCTYPE html>
<html>
<head>
<title>CSS background-image property</title>
<style>
body {
background-image: url("https://media.geeksforgeeks.org/wp-content/uploads/rk.png") initial;
}
h1,
h3 {
color: green;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>CSS background-image:url initial;</h3>
</body>
</html>
Đầu ra:
Các trình duyệt được hỗ trợ
Các trình duyệt được hỗ trợ bởi background-image Property được liệt kê dưới đây: