CSS의 background-origin 속성은 요소에 적용된 배경 이미지가 어느 영역을 기준으로 배치될지를 결정하는 속성입니다. 즉, 배경 이미지의 시작 위치가 테두리(border), 안쪽 여백(padding), 콘텐츠(content) 중 어디에서 계산될지 지정할 수 있습니다.
background-origin의 주요 값
background-origin 속성에는 다음 세 가지 값을 사용할 수 있습니다.
- border-box: 요소의 테두리 영역을 기준으로 배경 이미지가 배치됩니다.
- padding-box: 안쪽 여백(padding) 영역을 기준으로 배경 이미지가 배치됩니다. (기본값)
- content-box: 실제 콘텐츠가 표시되는 영역을 기준으로 배경 이미지가 배치됩니다.
특히 요소에 padding이나 border가 설정되어 있을 때 이 속성의 차이가 뚜렷하게 나타나므로, 배경 이미지의 세부적인 위치 조정이 필요한 경우 유용하게 활용할 수 있습니다.
사용 예제
아래 예제는 background-origin 속성에 content-box 값을 적용하여, 배경 이미지가 콘텐츠 영역을 기준으로 배치되도록 구현한 코드입니다. 직접 실행해 보면서 결과를 확인해 보세요.
<html>
<head>
<style>
#demo {
border: 5px dashed red;
padding: 10px;
background-image: url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg");
background-origin: content-box;
}
</style>
</head>
<body>
<div id="demo">
<h1>www.tutorialspoint.com</h1>
<p>
위 코드에서 #demo 요소에는 빨간색 점선 테두리와 10px의 안쪽 여백이
적용되어 있습니다. background-origin: content-box; 설정에 따라
배경 이미지는 테두리나 여백이 아닌 콘텐츠 영역을 기준으로 배치됩니다.
값을 border-box 또는 padding-box로 변경하면 배경 이미지의
시작 위치가 어떻게 달라지는지 비교해 볼 수 있습니다.
</p>
</div>
</body>
</html>참고: background-clip과의 관계
background-origin은 배경 이미지의 시작 기준점을 지정하는 반면, 유사한 이름의 background-clip 속성은 배경(이미지 및 색상)이 어느 영역까지만 그려질지를 제어합니다. 두 속성을 함께 사용하면 배경 이미지의 위치와 표시 범위를 더욱 정교하게 조절할 수 있습니다.