background-position 속성 질문드립니다

Question

background-position을 백분율(0~100%)이나 left, top의 용어로 설정하는 것은 금방 이해가 되는데, 이번에 버튼을 만들면서 음수값(px)으로 지정한 것이 잘 이해가 되지 않습니다. 개념이 꼬여서 잘 안풀어지는데, 명확하게 이해할 수 있는 방법이 있을까요?

js Lee · Answer

즉, 선생님의 예시에서, background-position: -300px -300px은, 버튼의 왼쪽 모서리가
이미지의 (300, 300) 지점에 위치하게 되지만,
background-position: 60% 60%는 이미지 자체가 오른쪽으로 300px, 아랫쪽으로 300px만큼 날아가기 때문에
버튼에 아무것도 보이지 않게 된다는 것인지요?

Dongho Lee · Answer

이 부분이 처음에는 까다로울 수 있지만 몇 번 접해보면 쉽습니다.
우선 100x100 크기의 버튼이 있다고 합시다. 그 배경 이미지의 크기는 500x500 이라고 하지요.
그런데 이 버튼의 배경이미지는 버튼의 좌측(left) 위쪽(top) 부분이 기준이라 버튼의 100x100 크기 바깥쪽은 안보이게 됩니다.
이미지의 좌표에서 300x300 부분의 위치에 있는 100x100 크기의 이미지가 버튼에 보여야 한다면
background-position: -300px -300px 을 지정해서 이미지가 왼쪽,위쪽으로 300픽셀 만큼 이동하면 버튼에 그림이 보이게 됩니다.
글로 설명드리니 좀 어렵네요. 이해가 어려우시면 다시한번 질문 주시기 바랍니다. 시간날 때 영상으로 설명드리겠습니다.