> 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-clip.md).

# Backgrounds Clip

The following classes control the background clip of elements:

## `.bg-clip-border`

Sets the background-clip property to "border-box", which clips the background image to the border box of the element.

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

Example usage:

```html
<div class="bg-clip-border">
  <!-- Content with a background image clipped to the border box -->
</div>
```

In the example above, the background image will be clipped to the border box of the element.

***

## `.bg-clip-padding`

Sets the background-clip property to "padding-box", which clips the background image to the padding box of the element.

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

Example usage:

```html
<div class="bg-clip-padding">
  <!-- Content with a background image clipped to the padding box -->
</div>
```

In the example above, the background image will be clipped to the padding box of the element.

***

## `.bg-clip-content`

Sets the background-clip property to "content-box", which clips the background image to the content box of the element.

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

Example usage:

```html
<div class="bg-clip-content">
  <!-- Content with a background image clipped to the content box -->
</div>
```

In the example above, the background image will be clipped to the content box of the element.

***

## `.bg-clip-text`

Sets the background-clip property to "text", which clips the background image to the foreground text of the element.

CSS equivalent: `background-clip: text;`

Example usage:

```html
<div class="bg-clip-text">
  <!-- Content with a background image clipped to the text -->
</div>
```

In the example above, the background image will be clipped to the text of the element.

***

These utility classes provide control over how the background image is clipped within the element, allowing you to create interesting visual effects and enhance the design of your web page.