backgroundPosition 속성은 요소의 배경 이미지가 원점(기준점)을 기준으로 어느 위치에 배치될지를 설정하거나 현재 값을 가져오는 데 사용되는 HTML DOM 스타일 속성입니다.
문법(Syntax)
backgroundPosition 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.backgroundPosition = value
속성 값(Value)
backgroundPosition 속성에 사용할 수 있는 주요 값들은 아래 표와 같습니다.
| 값 | 설명 |
|---|---|
| top left top center top right center left center center center right bottom left bottom center bottom right |
키워드 조합으로 배경 위치를 지정합니다. 값의 이름 그대로 해석하면 되며, 값을 하나만 작성할 경우 생략된 나머지 값은 항상 center로 적용됩니다. |
| xpos ypos | 수평(x) 위치와 수직(y) 위치를 직접 지정합니다. 기준점은 화면의 왼쪽 상단 모서리(0, 0)이며, 단위는 픽셀(px) 사용이 권장되지만 em, rem 등 다른 CSS 단위도 함께 사용할 수 있습니다. |
| x% y% | 수평(x) 및 수직(y) 위치를 백분율(%)로 지정합니다. 왼쪽 상단이 0% 0%, 오른쪽 하단이 100% 100%를 의미합니다. 이 경우에도 값이 하나만 주어지면 나머지 값은 중앙, 즉 50%로 처리됩니다. |
| initial | 해당 속성을 브라우저의 기본 초기값으로 설정합니다. |
| inherit | 부모 요소의 backgroundPosition 속성 값을 상속받습니다. |
예제(Example)
아래 예제를 통해 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="배경 이미지의 위치가 변경되었습니다";
}
</script>
</head>
<body>
<h2>Learning is fun</h2>
<p>Free learning tutorial for all...</p>
<p>아래 버튼을 클릭하면 배경 이미지의 위치가 변경됩니다.</p>
<button onclick="changeBackPosition()">CHANGE POSITION</button>
<p id="Sample"></p>
</body>
</html>
실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
CHANGE POSITION 버튼을 클릭한 후의 결과는 다음과 같습니다. 배경 이미지가 화면 오른쪽 상단(top right)으로 이동한 것을 확인할 수 있습니다.
