> For the complete documentation index, see [llms.txt](https://codennerd.gitbook.io/cxcss/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codennerd.gitbook.io/cxcss/product-guides/backgrounds/bg-origin.md).

# Backgrounds Origin

The following classes control the background origin of elements:

## `.bg-origin-border`

Sets the background origin to the border box, causing the background to originate from the border edges of the element.

CSS equivalent: `background-origin: border-box;`

Example usage:

```html
<div class="bg-origin-border">
  <!-- Content with a background originating from the border edges -->
</div>
```

In the example above, the background of the element will originate from the border edges.

***

## `.bg-origin-padding`

Sets the background origin to the padding box, causing the background to originate from the padding edges of the element.

CSS equivalent: `background-origin: padding-box;`

Example usage:

```html
<div class="bg-origin-padding">
  <!-- Content with a background originating from the padding edges -->
</div>
```

In the example above, the background of the element will originate from the padding edges.

***

## `.bg-origin-content`

Sets the background origin to the content box, causing the background to originate from the content edges of the element.

CSS equivalent: `background-origin: content-box;`

Example usage:

```html
<div class="bg-origin-content">
  <!-- Content with a background originating from the content edges -->
</div>
```

In the example above, the background of the element will originate from the content edges.

***

These utility classes provide a convenient way to control the background origin of elements, allowing you to customize the position from which the background originates within the element's box model.