background-origin

CSS Reference

background-origin은 배경 이미지의 위치와 크기를 계산할 기준 박스를 정합니다. padding-box, border-box, content-box를 선택할 수 있으며, 배경색의 칠하기 범위를 정하는 속성은 아닙니다.

문법과 주요 값

.card { background-origin: content-box; background-position: left top; }

값 또는 구분	동작과 선택 기준
`padding-box`	padding 바깥 경계를 배치 기준으로 사용
`border-box`	테두리 바깥 경계를 배치 기준으로 사용
`content-box`	내용 영역의 경계를 기준으로 사용
`background-attachment: fixed`	origin이 일반적인 배치 기준으로 적용되지 않음

값의 적용 범위와 문법은 MDN의 background-origin 문서에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 background-origin-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>background-origin 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { width: 240px; height: 150px; border: 12px dashed #718096; padding: 20px; background-color: #eaf2f8; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Crect width='160' height='80' fill='%23006c9c'/%3E%3Ccircle cx='40' cy='40' r='24' fill='%23ffd166'/%3E%3C/svg%3E"); background-repeat: no-repeat; }
.target { background-origin: padding-box; }
.reference { background-origin: content-box; }
</style>
</head>
<body>
<main id="demo">
<h1>background-origin 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">padding-box</p><div class="target"></div></div><div class="b"><p class="label">content-box</p><div class="reference"></div></div></section>
</main>
</body>
</html>

왼쪽 위에 놓인 도형의 시작 위치를 비교하세요. content-box에서는 padding만큼 안으로 들어간 내용 영역에서 이미지가 시작됩니다.

기준 영역과 보이는 영역 구분

origin은 배경의 좌표계를 정하고 clip은 칠하기 경계를 정합니다. origin을 content-box로 바꿔도 배경색이 자동으로 내용 영역에만 칠해지지는 않습니다. 배치와 칠하기를 모두 제한하려면 두 속성을 목적에 맞게 지정합니다.

백분율 크기와 위치의 변화

background-size의 백분율과 background-position의 백분율을 계산할 때 기준 영역의 크기가 중요합니다. 테두리·padding이 큰 박스에서는 origin 변경에 따라 이미지의 크기와 위치가 함께 달라질 수 있습니다. fixed 배경은 뷰포트 기준 처리가 있으므로 같은 결과를 기대하지 마세요.