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

# Backgrounds Position

The following classes control the background position of elements:

## `.bg-pos-top-left`

Sets the background position to the top left corner.

CSS equivalent: `background-position: top left;`

Example usage:

```html
<div class="bg-pos-top-left">
  <!-- Content with background positioned at the top left corner -->
</div>
```

In the example above, the background of the element will be positioned at the top left corner.

***

## `.bg-pos-top-center`

Sets the background position to the top center.

CSS equivalent: `background-position: top center;`

Example usage:

```html
<div class="bg-pos-top-center">
  <!-- Content with background positioned at the top center -->
</div>
```

In the example above, the background of the element will be positioned at the top center.

***

## `.bg-pos-top-right`

Sets the background position to the top right corner.

CSS equivalent: `background-position: top right;`

Example usage:

```html
<div class="bg-pos-top-right">
  <!-- Content with background positioned at the top right corner -->
</div>
```

In the example above, the background of the element will be positioned at the top right corner.

***

## `.bg-pos-center-left`

Sets the background position to the center left.

CSS equivalent: `background-position: center left;`

Example usage:

```html
<div class="bg-pos-center-left">
  <!-- Content with background positioned at the center left -->
</div>
```

In the example above, the background of the element will be positioned at the center left.

***

## `.bg-pos-center`

Sets the background position to the center.

CSS equivalent: `background-position: center;`

Example usage:

```html
<div class="bg-pos-center">
  <!-- Content with background positioned at the center -->
</div>
```

In the example above, the background of the element will be positioned at the center.

***

## `.bg-pos-center-right`

Sets the background position to the center right.

CSS equivalent: `background-position: center right;`

Example usage:

```html
<div class="bg-pos-center-right">
  <!-- Content with background positioned at the center right -->
</div>
```

In the example above, the background of the element will be positioned at the center right.

***

## `.bg-pos-bottom-left`

Sets the background position to the bottom left corner.

CSS equivalent: `background-position: bottom left;`

Example usage:

```html
<div class="bg-pos-bottom-left">
  <!-- Content with background positioned at the bottom left corner -->
</div>
```

In the example above, the background of the element will be positioned at the bottom left corner.

***

## `.bg-pos-bottom-center`

Sets the background position to the bottom center.

CSS equivalent: `background-position: bottom center;`

Example usage:

```html
<div class="bg-pos-bottom-center">
  <!-- Content with background positioned at the bottom center -->
</div>
```

In the example above, the background of the element will be positioned at the bottom center.

***

## `.bg-pos-bottom-right`

Sets the background position to the bottom right corner.

CSS equivalent: `background-position: bottom right;`

Example usage:

```html
<div class="bg-pos-bottom-right">
  <!-- Content with background positioned at the bottom right corner -->
</div>
```

In the example above, the background of the element will be positioned at the bottom right corner.

***

These utility classes provide a convenient way to control the background position of elements, allowing you to customize where the background is positioned within the element's box.