background-origin
Sets the origin point for background image positioning. Used with background-clip for fine background area control.
Class List
| Class | CSS | Description |
|---|---|---|
bgopb | background-origin: padding-box | Background starts from padding area (default) |
bgobb | background-origin: border-box | Background starts from border area |
bgocb | background-origin: content-box | Background starts from content area |
Usage Examples
<!-- 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>Tips
Difference between clip and origin
background-origin sets where background starts; background-clip sets visible area. Usually combined.