background-repeat
Controls background image tiling. bgrn (no-repeat) is most common for single images. For patterns use default repeat or bgrs, bgrd.
Class List
| Class | CSS | Description |
|---|---|---|
bgrr | background-repeat: repeat | Repeats both directions (default) |
bgrn | background-repeat: no-repeat | No repeat. Required for single images |
bgrx | background-repeat: repeat-x | Repeats horizontally only |
bgry | background-repeat: repeat-y | Repeats vertically only |
bgrs | background-repeat: space | Evenly spaced repeat (no clipping) |
bgrd | background-repeat: round | Stretches images to repeat without gaps |
Visual Diagram
Each box is one element and each blue square stands for one tile of the background image. The six values are reproduced as tile layouts.
bgrr
bgrn
bgrx
bgry
bgrs
bgrd
Usage Examples
<!-- Single background image (most common) -->
<div class="bgrn bsc bgpc h40rem"></div>
<!-- Pattern background (tiling) -->
<div class="bgrr h20rem"></div>
<!-- Horizontal stripe pattern -->
<div class="bgrx h10rem"></div>
<!-- Vertical stripe pattern -->
<div class="bgry h10rem"></div>Class Details
bgrrbackground-repeat: repeat
The default. The image tiles endlessly in both axes until the element is covered, and the last row and column are simply clipped at the element edge.
<!-- Seamless texture across a whole section -->
<section class="bgrr py6rem px3-2rem">
<h2 class="fs3-2rem fw800 cFAFAFA">Tiled texture backdrop</h2>
</section>bgrnbackground-repeat: no-repeat
Turns tiling off. Effectively mandatory for photos, illustrations and logos that must appear once. It is almost always paired with position and size classes.
<!-- One photo, once, centered, filling the box -->
<div class="bgrn bgpc bsc h30rem br8px"></div>bgrxbackground-repeat: repeat-x
Repeats along one horizontal band only. Use it for top rules, torn-paper edges and repeating zigzag dividers that run across but not down.
<!-- Decorative rule that runs along the top edge only -->
<div class="bgrx bgpt h4rem w100p"></div>bgrybackground-repeat: repeat-y
Repeats along one vertical band only. Use it for ruler marks down the left, timeline rails and decorated sidebar edges.
<!-- Rail that runs down the left edge of a timeline -->
<aside class="bgry bgpl w4rem h40rem"></aside>bgrsbackground-repeat: space
Lays down only whole tiles and distributes the leftover space evenly between them. Ideal for icon patterns where a clipped tile would look broken.
<!-- Icon pattern: whole tiles only, gaps absorb the remainder -->
<div class="bgrs h20rem br8px b1pxsolid27272A"></div>bgrdbackground-repeat: round
Slightly stretches or shrinks the tile so a whole number fits exactly. Ideal for grids that must connect seamlessly, at the cost of a small distortion of the original ratio.
<!-- Connected grid: tiles resize so a whole number fits -->
<div class="bgrd h20rem br8px b1pxsolid27272A"></div>Practical Example — Grid Backdrop and Top Band
A dashboard grid backdrop paired with a horizontal band that only runs along the top of a section: two elements in one screen using different repeat values.
<main class="bgrr minh100vh">
<!-- Grid texture tiles behind the whole dashboard -->
<section class="pr p3-2rem bg18181B br8px m2rem">
<!-- Zigzag band repeating across the top of the card only -->
<div class="bgrx bgpt pa t0 l0 w100p h8px"></div>
<h2 class="fs2-4rem fw700 cFAFAFA mb8px mt16px">Weekly traffic</h2>
<p class="fs14px c71717A">The backdrop tiles in both axes, the band only across.</p>
</section>
</main>Tips / Caveats
Remember the default is repeat
If you set nothing you get repeat. When one large photo shows up duplicated across the element, the cause is almost always a missing no-repeat.
With cover, repeating becomes meaningless
If the image already covers the element there is nowhere left to tile. When changing the repeat value does nothing, check the sizing first.
space and round size things differently
space keeps the tile size and grows the gaps, round removes gaps and resizes the tile. Icon patterns want space, connected grids want round.
Seams are the image file's job
No repeat value makes seams disappear. Grid and noise patterns must be authored so the artwork itself wraps on all four edges.
Per-axis mixes need two values
Repeating across but not down is expressed by the horizontal repeat class. Mixing space on one axis with round on the other is not covered by this class set, so solve that with the image size instead.
Use bgrn for photo backgrounds
Always use bgrn for photos. Default is repeat so images tile.
space vs round
bgrs adds even spacing; bgrd stretches to fill without gaps.