AAtomic CSS

background-origin

배경 이미지의 위치 기준점(원점)을 설정합니다. background-clip과 함께 사용하여 배경이 그려지는 영역을 세밀하게 제어합니다.

클래스 목록

클래스CSS설명
bgopbbackground-origin: padding-boxpadding 영역부터 배경 시작 (기본값)
bgobbbackground-origin: border-boxborder 영역부터 배경 시작
bgocbbackground-origin: content-boxcontent 영역부터 배경 시작

시각 도식

배경 이미지의 왼쪽 위 모서리가 어디에 놓이는지를 나타낸 도식입니다. 바깥 회색 띠가 테두리, 그 안쪽이 안쪽 여백, 가장 안쪽이 콘텐츠 영역이며 초록 점이 이미지가 시작되는 지점입니다.

bgobb

content

테두리 바깥 모서리에서 시작합니다. 테두리 두께만큼 이미지가 위로, 왼쪽으로 밀려납니다.

bgopb

content

테두리 안쪽 모서리에서 시작합니다. 값을 지정하지 않았을 때의 동작입니다.

bgocb

content

안쪽 여백을 건너뛰고 콘텐츠 모서리에서 시작합니다. 여백만큼 이미지가 안쪽으로 들어옵니다.

사용 예시

<!-- Background starts from border area -->
<div class="bgobb bgrn bsc b16pxdashed27272A p2rem h20rem">
  Background is visible under the border
</div>

<!-- Background starts from content area only -->
<div class="bgocb bgrn bsc p2rem b8pxsolid27272A h20rem">
  No background in the padding area
</div>

<!-- Used with clip -->
<div class="bgobb bgcpb bgrn bsc p2rem b8pxdashed27272A h20rem">
  Origin from border, clip to padding
</div>

클래스별 상세

bgopbbackground-origin: padding-box

기본값입니다. 배경 이미지가 테두리 안쪽 모서리를 원점으로 삼습니다. 대부분의 배경 이미지 배치는 이 값을 전제로 계산되므로, 다른 값을 썼다가 되돌릴 때 쓰는 복원용 클래스로도 유용합니다.

<!-- Default origin: restore it after overriding elsewhere -->
<div class="bgopb bgrn bsc b8pxsolid27272A p2rem h20rem">
  The image starts at the inner edge of the border.
</div>

bgobbbackground-origin: border-box

원점을 테두리 바깥 모서리로 옮깁니다. 테두리까지 이미지가 이어지는 액자형 배경, 그리고 두꺼운 테두리 위로 사진이 이어져야 하는 카드에 씁니다. 테두리 아래 영역까지 실제로 보이게 하려면 클립도 테두리 상자로 두어야 합니다.

<!-- Photo continues under a thick frame -->
<div class="bgobb bgcbb bgrn bsc b16pxdashed27272A p2rem h20rem br8px">
  <p class="fs16px fw700 cFFFFFF">Framed hero</p>
</div>

bgocbbackground-origin: content-box

원점을 콘텐츠 모서리로 옮깁니다. 안쪽 여백을 배경 없는 액자처럼 남기고 싶을 때, 그리고 아이콘 배경이 여백에 물리지 않게 할 때 씁니다.

<!-- Padding kept as an unpainted gutter around an icon tile -->
<div class="bgocb bgrn bsct bgpc p2rem w8rem h8rem bg18181B br8px">
  <span class="fs12px cA1A1AA">Icon tile</span>
</div>

실전 예시 — 액자형 배너

두꺼운 테두리를 액자처럼 두르고 그 안쪽으로 사진이 이어지는 배너 패턴입니다. 원점은 테두리 상자, 잘라내기는 안쪽 여백 상자로 두어 테두리는 남기고 이미지 위치만 확장합니다.

<article class="bgobb bgcpb bgrn bsc bgpc
                 b16pxdashed27272A p2rem h30rem br8px df fdc jcfe">
  <span class="fs12px ttu ls0-05em cA1A1AA mb8px">Release notes</span>
  <h3 class="fs2-4rem fw700 cFFFFFF lh1-3 mb8px">Atomic CSS 2.0</h3>
  <p class="fs14px cA1A1AA">The artwork runs under the frame because the origin is
     the border box, while the clip keeps the dashed frame itself unpainted.</p>
</article>

팁 / 주의사항

배경색만 쓰면 아무 효과도 없다

background-origin은 배경 이미지의 좌표 계산에만 관여합니다. 배경 이미지 없이 배경색만 지정한 요소에서는 어떤 값을 넣어도 화면이 똑같습니다. 영역을 잘라내고 싶다면 background-clip을 쓰세요.

고정 배경에서는 무시된다

background-attachment가 fixed이면 배경 이미지의 기준이 요소가 아니라 뷰포트가 되므로 background-origin은 아무 영향을 주지 않습니다. 스크롤 고정 배경과 원점 조정을 동시에 기대하지 마세요.

테두리가 없으면 두 값이 같아진다

테두리 두께가 0이면 테두리 상자와 안쪽 여백 상자가 같은 사각형이므로 두 클래스의 결과가 완전히 동일합니다. 도식에서 차이를 만들려면 테두리와 여백이 실제로 있어야 합니다.

size가 percent일 때 계산 기준도 함께 바뀐다

background-size를 백분율로 줄 때 기준이 되는 사각형이 origin이 지정한 상자입니다. 원점을 바꾸면 이미지 시작 위치뿐 아니라 확대 비율까지 달라질 수 있습니다.

clip과 origin의 차이

background-origin은 배경 이미지의 시작 위치를, background-clip은 배경이 보이는 영역을 결정합니다. 보통 두 속성을 함께 조합합니다.

background-clipbackground-sizebackground-positionbackground-repeatbackground-attachment