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

# Backgrounds Repeat

The following classes control the background repeat behavior of elements:

## `.bg-repeat`

Sets the background to repeat both horizontally and vertically.

CSS equivalent: `background-repeat: repeat;`

Example usage:

```html
<div class="bg-repeat">
  <!-- Content with background repeated both horizontally and vertically -->
</div>
```

In the example above, the background of the element will be repeated both horizontally and vertically.

***

## `.bg-repeat-x`

Sets the background to repeat horizontally only.

CSS equivalent: `background-repeat: repeat-x;`

Example usage:

```html
<div class="bg-repeat-x">
  <!-- Content with background repeated horizontally -->
</div>
```

In the example above, the background of the element will be repeated horizontally.

***

## `.bg-repeat-y`

Sets the background to repeat vertically only.

CSS equivalent: `background-repeat: repeat-y;`

Example usage:

```html
<div class="bg-repeat-y">
  <!-- Content with background repeated vertically -->
</div>
```

In the example above, the background of the element will be repeated vertically.

***

## `.bg-no-repeat`

Sets the background to not repeat.

CSS equivalent: `background-repeat: no-repeat;`

Example usage:

```html
<div class="bg-no-repeat">
  <!-- Content with background not repeated -->
</div>
```

In the example above, the background of the element will not be repeated.

***

## `.bg-space`

Sets the background to repeat and space out the images, adjusting the spacing between repeated images.

CSS equivalent: `background-repeat: space;`

Example usage:

```html
<div class="bg-space">
  <!-- Content with spaced background repetition -->
</div>
```

In the example above, the background images of the element will be repeated with spacing between them.

***

## `.bg-round`

Sets the background to repeat and round the images, adjusting the size of the repeated images to fill the container without cropping.

CSS equivalent: `background-repeat: round;`

Example usage:

```html
<div class="bg-round">
  <!-- Content with rounded background repetition -->
</div>
```

In the example above, the background images of the element will be repeated and resized to fit the container without cropping.

***

These utility classes provide a convenient way to control the background repeat behavior of elements, allowing you to customize how the background images are repeated or not repeated within the element's box.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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