ContextQMD
Back to Tailwindcss

Background Repeat

src/docs/background-repeat.mdx

latest3.3 KB
Original Source

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" />