CSS의 background-origin 속성을 사용하면 배경 이미지가 시작되는 기준 위치를 지정할 수 있습니다. 그중 content-box 값을 적용하면 배경 이미지가 요소의 테두리나 패딩이 아닌, 콘텐츠 영역의 왼쪽 상단 모서리부터 시작됩니다.
background-origin의 주요 값 비교
background-origin 속성은 세 가지 값을 가질 수 있으며, 각 값에 따라 배경 이미지의 시작 지점이 달라집니다.
- padding-box – 패딩 영역의 왼쪽 상단 모서리를 기준으로 배경이 시작됩니다.
- border-box – 테두리(border) 영역의 왼쪽 상단 모서리를 기준으로 배경이 시작됩니다.
- content-box – 콘텐츠 영역의 왼쪽 상단 모서리를 기준으로 배경이 시작됩니다.
content-box 값 구현 예제
아래 코드는 세 가지 값을 모두 적용하여 차이를 한눈에 비교할 수 있도록 작성된 예제입니다. 세 번째 박스(#value3)에 content-box 값이 사용되었습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#value1 {
border: 3px solid blue;
padding: 30px;
background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);
background-repeat: no-repeat;
background-origin: padding-box;
}
#value2 {
border: 3px solid orange;
padding: 30px;
background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);
background-repeat: no-repeat;
background-origin: border-box;
}
#value3 {
border: 3px dashed yellow;
padding: 30px;
background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);
background-repeat: no-repeat;
background-origin: content-box;
}
</style>
</head>
<body>
<h1>padding-box value</h1>
<div id = "value1">
<h2>Heading 2</h2>
<p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.
<h3>Heading 3</h3>
This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.</p>
</div>
<h1>border-box value</h1>
<div id = "value2">
<h2>Heading 2</h2>
<p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.
<h3>Heading 3</h3>
This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.</p>
</div>
<h1>content-box value</h1>
<div id = "value3">
<h2>Heading 2</h2>
<p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.
<h3>Heading 3</h3>
This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.</p>
</div>
</body>
</html>실행 결과 확인 포인트
위 코드를 브라우저에서 실행하면 각 박스마다 배경 이미지가 시작되는 위치가 다르게 나타납니다. 특히 파란색 점선 테두리가 적용된 세 번째 박스(content-box)에서는 패딩 30px만큼 안쪽인 콘텐츠 영역부터 배경 이미지가 표시되는 것을 확인할 수 있습니다. 이처럼 background-origin 속성을 활용하면 배경 이미지의 배치 기준을 자유롭게 조절할 수 있습니다.