Thuộc tính background-position trong CSS được sử dụng để đặt vị trí ban đầu cho hình nền so với gốc.
Cú pháp
Cú pháp của thuộc tính background-position trong CSS như sau -
Selector {
background-position: /*value*/
} Các ví dụ sau minh họa thuộc tính background-position trong CSS -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 30px;
padding: 100px;
background-image: url("https://www.tutorialspoint.com/images/C-programming.png"), url("https://www.tutorialspoint.com/images/Swift.png"), url("https://www.tutorialspoint.com/images/xamarian.png");
background-repeat: no-repeat;
background-position: 15% 20%, top, right;
border: 1px solid;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 20px;
padding: 80px;
background-image: url("https://www.tutorialspoint.com/images/dbms.png"), url("https://www.tutorialspoint.com/images/Operating-System.png");
background-repeat: no-repeat;
background-position: 0 0, bottom right;
background-color: lemonchiffon;
}
</style>
</head>
<body>
<p>This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. </p>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
