background-repeat

Definition

The background-repeat property sets how background images are repeated.

Syntax

.pattern {
  background-image: url("/img/tile.svg");
  background-repeat: repeat-x;
}

Values

repeat: tile both horizontally and vertically (default).
repeat-x / repeat-y: tile along a single axis.
space: repeat with even spacing; images are not stretched.
round: stretch images slightly so tiles align without clipping.
no-repeat: display the image once.

Practical Examples

.banner {
  background-image: url("/img/icon.svg");
  background-repeat: space;
  background-size: 48px;
}

Switch repeat modes to control how brand patterns tile across large areas.

HTML

Code

<div class="grid gap-4 sm:grid-cols-2">
  <div class="h-32 rounded-lg border border-slate-200" style="background: url(&quot;data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='6' fill='%230ea5e9'/%3E%3C/svg%3E&quot;) repeat; background-size: 40px;"></div>
  <div class="h-32 rounded-lg border border-slate-200" style="background: url(&quot;data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='6' fill='%230ea5e9'/%3E%3C/svg%3E&quot;) space; background-size: 40px;"></div>
</div>

Tips & Best Practices

Use space or round to create evenly distributed icons without manual calculations.
Combine with background-size to control tile density.
When mixing repeats and single images, declare values for each layer individually.

Accessibility & UX Notes

Ensure repeated imagery doesn’t distract from important content—consider lowering opacity or scale.

Browser Support

Repeat keywords are supported in all major browsers. space and round require IE9+ but are otherwise safe.

background-image to supply the tile asset.
background-size and background-position to control density and alignment.
mask properties for more complex tiling effects.