웹 페이지에서 배경 이미지의 위치를 조정하고 싶다면 CSS의 background-position 속성을 사용하면 됩니다. 이 속성을 활용하면 이미지가 요소 내에서 어디에 배치될지 정확하게 제어할 수 있습니다.
background-position 속성이란?
background-position 속성은 배경 이미지의 시작 위치를 지정합니다. 픽셀(px), 퍼센트(%) 등의 단위나 left, center, right, top, bottom 같은 키워드 값을 사용할 수 있으며, 하나의 값만 입력하면 그 값은 수평 위치로 적용되고 수직 위치는 자동으로 중앙(center)으로 설정됩니다.
예제
아래 코드는 배경 이미지를 왼쪽에서 80픽셀 떨어진 위치에 배치하는 예시입니다:
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position:80px;
}
</style>
</head>
<body>
<p>Tutorials point</>
</body>
</html>코드 설명
- background-image: 배경으로 사용할 이미지 파일의 경로를 지정합니다.
- background-position: 80px;: 이미지를 왼쪽 가장자리에서 80px 만큼 이동시킵니다. 두 번째 값이 없으므로 수직 위치는 기본값인 중앙에 배치됩니다.
이처럼 background-position 속성을 활용하면 배경 이미지를 원하는 위치에 자유롭게 배치할 수 있습니다. 필요에 따라 background-position: 50% 20px;처럼 수평과 수직 값을 함께 지정하여 더욱 세밀한 조정도 가능합니다.