# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://codennerd.gitbook.io/cxcss/product-guides/backgrounds/bg-position.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.