Color & Backgrounds
background-repeat
Setting how background images are repeated.
Overview
| Class | Declarations |
|---|---|
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;
|
background-repeat:<mode> | background-repeat: <mode>;
|
Examples
Disable tiling
Compare the same small background tile with repetition enabled and disabled. Neither image size nor position changes.
Disable tiling
The source image and tile dimensions remain fixed. Count the painted rows and columns to compare native repetition.
<!-- Repeat · both axes --><div id="target" role="img" aria-label="Geometric landscape" class="h:160px w-xs max-w:100% bg-repeat background-position:0|0 background-size:80px|50px bg-surface-muted background-image:url(/demo/landscape.svg)"></div><!-- No repeat · one tile --><div id="target" role="img" aria-label="Geometric landscape" class="h:160px w-xs max-w:100% bg-no-repeat background-position:0|0 background-size:80px|50px bg-surface-muted background-image:url(/demo/landscape.svg)"></div>Generated CSS
@layer utilities { .bg-no-repeat { background-repeat: no-repeat } .bg-repeat { background-repeat: repeat }}Repeat on one axis
bg-repeat-x tiles horizontally; bg-repeat-y tiles vertically. The perpendicular axis keeps a single row or column.
Repeat on one axis
The source image and tile dimensions remain fixed. Count the painted rows and columns to compare native repetition.
<!-- Repeat horizontally --><div id="target" role="img" aria-label="Geometric landscape" class="h:160px w-xs max-w:100% bg-repeat-x background-position:0|0 background-size:80px|50px bg-surface-muted background-image:url(/demo/landscape.svg)"></div><!-- Repeat vertically --><div id="target" role="img" aria-label="Geometric landscape" class="h:160px w-xs max-w:100% bg-repeat-y background-position:0|0 background-size:80px|50px bg-surface-muted background-image:url(/demo/landscape.svg)"></div>Use the native background-repeat:* form for other values, such as space or round. Repetition is independent of background size.
Apply conditionally
Widen to sm to repeat the tile on both axes. Narrow screens and print show it once, with the same explicit size and position.
Apply conditionally
The source image and tile dimensions remain fixed. Count the painted rows and columns to compare native repetition.
<!-- One tile → repeat at sm --><div id="target" role="img" aria-label="Geometric landscape" class="h:160px w-xs max-w:100% bg-no-repeat background-position:0|0 background-size:80px|50px bg-surface-muted background-image:url(/demo/landscape.svg) bg-no-repeat@print bg-repeat@screen@sm"></div>Set bg-no-repeat explicitly for photographic compositions when tiling is not intended.