# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/background-repeat.mdx

import cloudsImg from "@/docs/img/clouds.svg";
import { ApiTable } from "@/components/api-table.tsx";
import { Example } from "@/components/example.tsx";
import { Figure } from "@/components/figure.tsx";
import { ResponsiveDesign } from "@/components/content.tsx";

export const title = "background-repeat";
export const description = "Utilities for controlling the repetition of an element's background image.";

<ApiTable
  rows={[
    ["bg-repeat", "background-repeat: repeat;"],
    ["bg-repeat-x", "background-repeat: repeat-x;"],
    ["bg-repeat-y", "background-repeat: repeat-y;"],
    ["bg-repeat-space", "background-repeat: space;"],
    ["bg-repeat-round", "background-repeat: round;"],
    ["bg-no-repeat", "background-repeat: no-repeat;"],
  ]}
/>

## Examples

### Basic example

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

<Figure>

<Example padding={false}>
  {<div className="h-64 bg-center bg-repeat" style={{ backgroundImage: `url(${cloudsImg.src})` }}></div>}
</Example>

```html
<!-- [!code classes:bg-repeat] -->
<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat ..."></div>
```

</Figure>

### Repeating horizontally

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

<Figure>

<Example padding={false}>
  {<div className="h-64 bg-center bg-repeat-x" style={{ backgroundImage: `url(${cloudsImg.src})` }}></div>}
</Example>

```html
<!-- [!code classes:bg-repeat-x] -->
<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-x ..."></div>
```

</Figure>

### Repeating vertically

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

<Figure>

<Example padding={false}>
  {<div className="h-64 bg-center bg-repeat-y" style={{ backgroundImage: `url(${cloudsImg.src})` }}></div>}
</Example>

```html
<!-- [!code classes:bg-repeat-y] -->
<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-y ..."></div>
```

</Figure>

### Preventing clipping

Use the `bg-repeat-space` utility to repeat the background image without clipping:

<Figure>

<Example padding={false} resizable>
  {<div className="h-64 bg-center bg-repeat-space" style={{ backgroundImage: `url(${cloudsImg.src})` }}></div>}
</Example>

```html
<!-- [!code classes:bg-repeat-space] -->
<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-space ..."></div>
```

</Figure>

### Preventing clipping and gaps

Use the `bg-repeat-round` utility to repeat the background image without clipping, stretching if needed to avoid gaps:

<Figure>

<Example padding={false} resizable>
  {<div className="h-64 bg-center bg-repeat-round" style={{ backgroundImage: `url(${cloudsImg.src})` }}></div>}
</Example>

```html
<!-- [!code classes:bg-repeat-round] -->
<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-round ..."></div>
```

</Figure>

### Disabling repeating

Use the `bg-no-repeat` utility to prevent a background image from repeating:

<Figure>

<Example padding={false}>
  {<div className="h-64 bg-center bg-no-repeat" style={{ backgroundImage: `url(${cloudsImg.src})` }}></div>}
</Example>

```html
<!-- [!code classes:bg-no-repeat] -->
<div class="bg-[url(/img/clouds.svg)] bg-center bg-no-repeat ..."></div>
```

</Figure>

### Responsive design

<ResponsiveDesign property="background-repeat" defaultClass="bg-repeat" featuredClass="bg-repeat-x" />