CSS의 background-position 속성은 배경 이미지의 위치를 세밀하게 제어할 때 사용합니다. 이 속성을 활용하면 요소 내부에서 배경 이미지가 표시되는 시작 지점을 원하는 대로 지정할 수 있어, 디자인 의도에 맞는 정교한 배경 연출이 가능합니다.
background-position의 주요 값
background-position 속성에는 다양한 형태의 값을 사용할 수 있습니다.
- 길이 단위(px, em 등): 왼쪽 상단 모서리를 기준으로 정확한 거리만큼 이미지를 이동시킵니다.
- 백분율(%): 요소 크기 대비 상대적인 위치를 지정합니다.
- 키워드(left, center, right, top, bottom): 직관적이고 간편하게 위치를 설정합니다.
예제
다음 코드를 실행하면 background-position 속성이 어떻게 동작하는지 직접 확인할 수 있습니다. 아래 예제에서는 배경 이미지를 왼쪽 가장자리에서 30픽셀 떨어진 위치에 배치합니다.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position: 30px;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>
결과 설명
위 예제에서 background-position: 30px;는 배경 이미지를 수평 방향으로 왼쪽에서 30px 떨어진 지점에 위치시킵니다. 이처럼 값이 하나만 지정되면 해당 값은 수평 위치에 적용되고, 생략된 수직 위치는 기본값인 center로 처리됩니다. 수평과 수직 위치를 함께 지정하려면 background-position: 30px 50px;처럼 두 개의 값을 나란히 작성하면 됩니다.