CSS에서 background-origin 속성은 배경 이미지가 어느 영역을 기준으로 배치될지를 지정하는 데 사용됩니다. 이 속성을 활용하면 요소의 테두리(border), 안쪽 여백(padding), 콘텐츠(content) 영역 중 어디에서 배경 이미지가 시작할지 정밀하게 제어할 수 있습니다.
background-origin 속성의 주요 값
- border-box : 테두리 영역까지 포함하여 배경 이미지를 배치합니다. (기본값)
- padding-box : 안쪽 여백(padding) 영역을 기준으로 배경 이미지를 배치합니다.
- content-box : 실제 콘텐츠 영역만을 기준으로 배경 이미지를 배치합니다.
예제 코드
아래 예제는 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>www.tutorialspoint.com 웹사이트는 Tutorials Point India Private Limited가 소유하고 운영하고 있습니다.
본 문서에서 모든 방문자, 사용자, 학습자, 기여자, 강사는 "사용자(users)"라 칭하며,
tutorialspoint.com 웹사이트는 "웹사이트(website)"라 칭합니다.
당사는 온라인 개인정보 보호를 위해 최선을 다하고 있으며,
이 개인정보 처리방침은 웹사이트 방문 시 수집하는 정보와 공유하는 정보에 대해 설명합니다.
정책은 수시로 검토 및 업데이트되므로 최신 버전을 확인하시기 바랍니다.</p>
</div>
</body>
</html>실행 결과 설명
위 코드에서 #demo 요소에는 빨간색 점선 테두리(5px)와 10px의 안쪽 여백이 적용되어 있습니다. background-origin 값을 content-box로 설정했기 때문에 배경 이미지는 테두리나 여백을 건너뛰고 실제 텍스트가 시작되는 콘텐츠 영역부터 표시됩니다.
값을 border-box 또는 padding-box로 변경하면 배경 이미지의 시작 위치가 달라지는 것을 확인할 수 있으니, 각 값의 차이를 비교해 보며 학습하시길 권장합니다.