CSS의 background-position 속성은 배경 이미지가 요소 내에서 어느 위치에 표시될지를 결정합니다. 원점(기준점)을 기준으로 배경 이미지의 초기 위치를 지정하며, 하나 이상의 배경 이미지에 각각 다른 위치 값을 적용할 수도 있습니다.
문법(Syntax)
CSS background-position 속성의 기본 문법은 다음과 같습니다.
Selector {
background-position: /*값*/;
}이 속성에는 키워드(top, bottom, left, right, center), 백분율(%), 또는 길이 단위(px, em 등)를 조합하여 사용할 수 있습니다. 여러 개의 배경 이미지를 사용하는 경우에는 쉼표(,)로 구분하여 각 이미지마다 별도의 위치 값을 지정합니다.
예제 1: 여러 배경 이미지의 위치 지정
다음 예제는 세 개의 배경 이미지에 서로 다른 위치 값을 적용하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 30px;
padding: 100px;
background-image: url("https://www.tutorialspoint.com/images/C-programming.png"), url("https://www.tutorialspoint.com/images/Swift.png"), url("https://www.tutorialspoint.com/images/xamarian.png");
background-repeat: no-repeat;
background-position: 15% 20%, top, right;
border: 1px solid;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 첫 번째 이미지는 15% 20% 위치에, 두 번째 이미지는 상단 중앙(top)에, 세 번째 이미지는 오른쪽(right)에 각각 배치되어 다음과 같이 출력됩니다.
예제 2: 텍스트가 있는 요소에서의 배경 위치
다음 예제는 문단(p) 요소에 두 개의 배경 이미지를 배치하고, 각각 다른 위치에 표시하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 20px;
padding: 80px;
background-image: url("https://www.tutorialspoint.com/images/dbms.png"), url("https://www.tutorialspoint.com/images/Operating-System.png");
background-repeat: no-repeat;
background-position: 0 0, bottom right;
background-color: lemonchiffon;
}
</style>
</head>
<body>
<p>This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph.</p>
</body>
</html>실행 결과
위 코드를 실행하면 첫 번째 이미지는 좌측 상단(0 0)에, 두 번째 이미지는 우측 하단(bottom right)에 배치되어 다음과 같이 출력됩니다.
정리
background-position 속성을 활용하면 배경 이미지를 정밀하게 제어할 수 있습니다. 특히 여러 배경 이미지를 사용할 때 쉼표로 구분된 값 목록을 활용하면 각 이미지의 위치를 독립적으로 설정할 수 있어, 로고·아이콘·장식 요소 등을 하나의 요소 안에서 자유롭게 배치할 때 매우 유용합니다.