CSS background-position 속성은 원점을 기준으로 배경 이미지의 초기 위치를 설정하는 데 사용됩니다.
구문
CSS background-position 속성의 구문은 다음과 같습니다 -
Selector {
background-position: /*value*/
} 다음 예는 CSS background-position 속성을 보여줍니다 -
예시
<!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> 출력
이것은 다음 출력을 제공합니다 -
예시
<!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> 출력
이것은 다음 출력을 제공합니다 -
