background-repeat

background-repeat controls tiling for each background image. Repetition does not create extra HTML elements or enlarge the element’s layout box.

Repeat a small tile or paint it once

The gradient tile is explicitly 32px square. One box repeats it across both axes; the other paints a single tile at the initial top-left position.

<p>Repeat</p>
<div class="sample repeat" aria-hidden="true"></div>
<p>No repeat</p>
<div class="sample once" aria-hidden="true"></div>

.sample {
  height: 90px;
  background-image: linear-gradient(90deg, #2563eb 50%, #bfdbfe 50%);
  background-size: 32px 32px;
  background-color: #eff6ff;
  margin-block: 0.5rem;
}
.repeat {
  background-repeat: repeat;
}
.once {
  background-repeat: no-repeat;
}

Compare spaced tiles with rounded tile counts

Space keeps the 70px width and distributes leftover space between full tiles. Round changes the tile width to fit a whole number across the box, so artwork can stretch.

<p>Space</p>
<div class="sample spaced" aria-hidden="true"></div>
<p>Round</p>
<div class="sample rounded" aria-hidden="true"></div>

.sample {
  width: 250px;
  max-width: 100%;
  height: 70px;
  background-image: linear-gradient(90deg, #2563eb 50%, #bfdbfe 50%);
  background-size: 70px 70px;
  background-color: #eff6ff;
  margin-block: 0.5rem;
}
.spaced {
  background-repeat: space no-repeat;
}
.rounded {
  background-repeat: round no-repeat;
}

Values and defaults

The initial value repeats both axes and the property is not inherited. One ordinary keyword applies to both axes; two keywords set horizontal then vertical. Repeat-x means repeat no-repeat; repeat-y means no-repeat repeat. Multiple image layers use comma-separated repeat settings.

Repeat can clip edge tiles. Space distributes gaps without resizing full tiles and pins the first/last when more than one fits; if only one fits, position becomes relevant. Round adjusts tile size to fit whole counts and can distort artwork, especially when both axes resize independently.

Common mistakes

A gradient normally fills the entire positioning area, so repeat may appear unchanged unless you provide a smaller background-size. No-repeat does not size or center the image. Decorative patterns must not reduce text contrast.

Learn background-size, background-position, and background-image.

Sources and browser support

MDN: background-repeat describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.