CSS의 background-origin 속성에 border-box 값을 적용하면, 배경 이미지가 요소의 테두리(border) 영역 왼쪽 상단 모서리부터 시작되도록 설정할 수 있습니다.
background-origin 속성의 세 가지 값
background-origin 속성은 배경 이미지가 어느 영역을 기준으로 배치될지 결정합니다. 다음과 같은 세 가지 값을 사용할 수 있으며, 각 값에 따라 배경 이미지의 시작 위치가 달라집니다.
- padding-box (기본값): 패딩 영역의 왼쪽 상단 모서리부터 배경 이미지가 시작됩니다.
- border-box: 테두리 영역의 왼쪽 상단 모서리부터 배경 이미지가 시작됩니다.
- content-box: 콘텐츠 영역의 왼쪽 상단 모서리부터 배경 이미지가 시작됩니다.
border-box 값 구현 예제
아래 예제 코드를 실행하면 세 가지 값의 차이를 직접 확인할 수 있습니다. 각 div 요소에 동일한 배경 이미지를 적용하고 background-origin 값만 다르게 설정했습니다.
<!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 값</h1>
<div id = "value1">
<h2>제목 2</h2>
<p>이것은 예시 텍스트입니다. 패딩 영역을 기준으로 배경 이미지가 시작되는 것을 확인할 수 있습니다.
<h3>제목 3</h3>
background-origin 속성의 padding-box 값은 기본값이며, 테두리 안쪽부터 배경이 채워집니다.</p>
</div>
<h1>border-box 값</h1>
<div id = "value2">
<h2>제목 2</h2>
<p>이것은 예시 텍스트입니다. 테두리 영역까지 배경 이미지가 확장되어 시작점이 테두리의 왼쪽 상단 모서리가 됩니다.
<h3>제목 3</h3>
border-box 값을 사용하면 배경 이미지가 테두리 아래까지 덮는다는 점을 기억하세요.
</p>
</div>
<h1>content-box 값</h1>
<div id = "value3">
<h2>제목 2</h2>
<p>이것은 예시 텍스트입니다. 콘텐츠 영역만을 기준으로 배경 이미지가 시작되므로, 패딩과 테두리 영역에는 배경이 적용되지 않습니다.
<h3>제목 3</h3>
content-box 값은 배경을 실제 내용이 있는 부분에만 표시하고 싶을 때 유용합니다.
</p>
</div>
</body>
</html>
정리
background-origin: border-box;를 사용하면 배경 이미지가 테두리 영역까지 포함하여 배치됩니다. 반면 padding-box는 패딩 영역부터, content-box는 콘텐츠 영역부터 배경이 시작됩니다. 디자인 의도에 맞게 세 값을 비교해 가며 사용하면 더욱 정교한 배경 스타일링이 가능합니다.