---
url: /docs/foundations/css-classes/background-origin.md
---
> Backgrounds

# Background Origin

Utilities for controlling how an element's background is positioned relative to borders, padding, and content.

## Quick reference

| Class | Description |
|-------|-------------|
| `bg-origin-border` | `background-origin: border-box` |
| `bg-origin-padding` | `background-origin: padding-box` |
| `bg-origin-content` | `background-origin: content-box` |

## Basic usage

### Setting the background origin

Use `bg-origin-border`, `bg-origin-padding` and `bg-origin-content` to control where an element’s background is rendered.

```html
<div class="bg-origin-border ... "></div>
<div class="bg-origin-padding ... "></div>
<div class="bg-origin-content ... "></div>
```