CSS에서 배경 이미지의 위치를 제어하려면 background-position 속성을 사용합니다. 이 속성을 활용하면 요소 내에서 배경 이미지가 표시되는 시작 지점을 픽셀(px), 백분율(%), 또는 left·center·right·top·bottom 같은 키워드 값으로 자유롭게 지정할 수 있습니다.
background-position 기본 문법
background-position: 값;
값은 하나만 입력할 경우 주로 수평 위치로 해석되며, 두 개의 값을 입력하면 각각 수평 위치와 수직 위치로 적용됩니다.
예제 코드
아래 예제는 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>자주 사용하는 값 정리
- 키워드 값: left, center, right, top, bottom 등 직관적인 위치 지정
- 길이 값: 30px처럼 픽셀 단위로 정확한 좌표 지정
- 백분율 값: 요소 크기 기준으로 상대적인 위치 지정 (예: 50% 50%는 중앙 정렬)
활용 팁
background-position은 background-repeat, background-size 속성과 함께 사용하면 반응형 웹 디자인에서 배경 이미지를 더욱 세밀하게 제어할 수 있습니다. 예를 들어 background-size: cover와 함께 중앙 정렬 값을 지정하면 화면 크기와 관계없이 이미지의 핵심 부분이 항상 보이도록 설정할 수 있습니다.