Thuộc tính nền CSS giúp chúng ta tạo kiểu cho nền của các phần tử. Thuộc tính nền CSS là cách viết tắt để chỉ định nền của một phần tử. background-color, background-image, background-repeat, background-position, background-clip, background-size, background-origin và background-attachment bao gồm các thuộc tính nền CSS.
Cú pháp
Cú pháp của thuộc tính nền CSS như sau−
Selector {
background: /*value*/
} Ví dụ
Các ví dụ sau minh họa thuộc tính nền CSS -
<!DOCTYPE html>
<html>
<head>
<style>
#main {
margin: auto;
width: 300px;
background-image: url("https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg");
background-repeat: no-repeat;
background-size: cover;
}
#im {
height: 200px;
width: 200px;
background-image: url("https://www.tutorialspoint.com/images/css.png");
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<div id="main">
<div id="im"></div>
</div>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://www.tutorialspoint.com/hcatalog/images/hcatalog-mini- logo.jpg"),url("https://www.tutorialspoint.com/hbase/images/hbase-mini-logo.jpg"),url("https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 10% 10%, 40% 40%, 90% 10%;
}
</style>
</head>
<body>
</body>
</html> Đầu ra
Điều này cho kết quả sau
