---
url: /docs/foundations/css-classes/background-repeat.md
---
> Backgrounds

# Background Repeat

Utilities for controlling the repetition of an element's background image.

## Quick reference

| Class | Description |
|-------|-------------|
| `bg-repeat` | `background-repeat: repeat` |
| `bg-no-repeat` | `background-repeat: no-repeat` |
| `bg-repeat-x` | `background-repeat: repeat-x` |
| `bg-repeat-y` | `background-repeat: repeat-y` |
| `bg-repeat-round` | `background-repeat: round` |
| `bg-repeat-space` | `background-repeat: space` |

## Basic usage

### Repeat

Use `bg-repeat` to repeat the background image both vertically and horizontally.

```html
<div class="bg-repeat ..."></div>
```

### No Repeat

Use `bg-no-repeat` when you don’t want to repeat the background image.

```html
<div class="bg-no-repeat ..."></div>
```

### Repeat Horizontally

Use `bg-repeat-x` to repeat the background image only horizontally.

```html
<div class="bg-repeat-x ..."></div>
```

### Repeat Vertically

Use `bg-repeat-y` to repeat the background image only vertically.

```html
<div class="bg-repeat-y ..."></div>
```