backgroundPosition 속성은 원점을 기준으로 요소의 배경 이미지에 대한 초기 위치를 설정하거나 가져오는 데 사용됩니다.
구문
다음은 −
의 구문입니다.backgroundPosition 속성 설정 -
object.style.backgroundPosition = value
값
다음은 값입니다 -
| 값 | 설명 |
|---|---|
| 왼쪽 상단 상단 중앙 오른쪽 상단 중앙 왼쪽 중앙 센터 중앙 오른쪽 왼쪽 하단 하단 중앙 오른쪽 하단 | 위치는 이름으로 알 수 있습니다. 하나의 값만 쓰면 다른 하나는 항상 중앙에 위치합니다. |
| 오해 | 가로(x) 및 세로 위치(y)를 나타냅니다. 0,0부터 왼쪽 상단에서 시작합니다. 다른 CSS 단위도 사용할 수 있지만 픽셀은 단위로 선호됩니다. |
| x% y% | 가로(x) 및 세로(y) 위치의 위치를 백분율로 지정합니다. 왼쪽 상단에서 0% 0%, 오른쪽 하단 코넷 100% 100%로 시작합니다. 한 값을 지정하면 다른 값이 중앙에 있음을 의미합니다. 즉, 50%가 됩니다. |
| 초기 | 이 속성을 초기 값으로 설정합니다. |
| 상속 | 상위 속성 값을 상속합니다. |
예시
backgroundPosition 속성에 대한 예를 살펴보겠습니다 -
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-image: url("https://www.tutorialspoint.com/power_bi/images/power-bi-minilogo.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 20% 60%;
}
</style>
<script>
function changeBackPosition(){
document.body.style.backgroundPosition="top right";
document.getElementById("Sample").innerHTML="The background image position is now changed";
}
</script>
</head>
<body>
<h2>Learning is fun</h2>
<p>Free learning tutorial for all...</p>
<p>Change the background image position by clicking the below button.</p>
<button onclick="changeBackPosition()">CHANGE POSITION</button>
<p id="Sample"></p>
</body>
</html> 출력
이것은 다음과 같은 출력을 생성합니다 -
CHANGE POSITION 버튼 클릭 시 -
