background-origin
배경 이미지의 위치 기준점(원점)을 설정합니다. background-clip과 함께 사용하여 배경이 그려지는 영역을 세밀하게 제어합니다.
클래스 목록
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 | CSS | 설명 |
|---|---|---|
bgopb | background-origin: padding-box | padding 영역부터 배경 시작 (기본값) |
bgobb | background-origin: border-box | border 영역부터 배경 시작 |
bgocb | background-origin: content-box | 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>팁
clip과 origin의 차이
background-origin은 배경 이미지의 시작 위치를, background-clip은 배경이 보이는 영역을 결정합니다. 보통 두 속성을 함께 조합합니다.