background-position 관련 질문합니다.

안녕하세요. 답변 도우미입니다.

이 속성은 배경 이미지의 위치를 정의하는 데 사용되는데, 값이 center 10%에서 center 50%로 바뀌면 일반적으로는 이미지가 Y축을 따라 아래로 이동할 것 같다고 생각할 수 있어요. 하지만 실제로는 그렇지 않아요. 왜 그런지 설명해 드릴게요.

background-position의 x y 값은 배경 이미지가 어디에 위치해야 하는지를 지정합니다. 여기서 y 값인 10%나 50%는 이미지 상단 모서리의 위치를 의미해요.

• center 10%: 상단 모서리가 컨테이너의 높이의 10% 지점에 오게 됩니다.

• center 50%: 상단 모서리가 컨테이너의 높이의 50% 지점에 오게 됩니다.

즉, y 값이 커질수록 배경 이미지의 상단 모서리는 아래로 이동하지 않고 오히려 위로 이동하게 돼요. 그래서 center 50%로 바꾸면 이미지가 오히려 위로 올라가는 것처럼 보이게 됩니다.

간단히 말해서, y 축의 백분율 값이 커질수록, 그 값은 배경 이미지의 상단을 기준으로 하기 때문에 이미지는 오히려 위로 올라가게 되는 것입니다.

감사합니다.