background-origin
배경 이미지의 위치 기준점(원점)을 설정합니다. background-clip과 함께 사용하여 배경이 그려지는 영역을 세밀하게 제어합니다.
클래스 목록
| 클래스 | CSS | 설명 |
|---|---|---|
bgopb | background-origin: padding-box | padding 영역부터 배경 시작 (기본값) |
bgobb | background-origin: border-box | border 영역부터 배경 시작 |
bgocb | background-origin: content-box | content 영역부터 배경 시작 |
사용 예시
<!-- border 영역부터 배경 시작 -->
<div class="bgobb bgrn bsc b16pxdashed27272A p2rem h20rem">
border 아래로 배경이 보입니다
</div>
<!-- content 영역부터만 배경 시작 -->
<div class="bgocb bgrn bsc p2rem b8pxsolid27272A h20rem">
padding 영역에는 배경이 없습니다
</div>
<!-- clip과 함께 사용 -->
<div class="bgobb bgcpb bgrn bsc p2rem b8pxdashed27272A h20rem">
origin은 border부터, clip은 padding까지
</div>팁
clip과 origin의 차이
background-origin은 배경 이미지의 시작 위치를, background-clip은 배경이 보이는 영역을 결정합니다. 보통 두 속성을 함께 조합합니다.