Background Repeat

Controls the repetition of the background image of an element.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome

Edge

Firefox

Safari

Class	Style
`br-nr`	`background-repeat: no-repeat;`
`br-r`	`background-repeat: repeat;`
`br-ro`	`background-repeat: round;`
`br-rx`	`background-repeat: repeat-x;`
`br-ry`	`background-repeat: repeat-y;`
`br-s`	`background-repeat: space;`

Repeat

Initial value

The background image will be repeated both horizontally and vertically.

<div class="br-r bp-c h-s" style="background-image: url('...');">
  <div class="p-10"></div>
</div>

No Repeat

The background image will not be repeated.

<div class="br-nr bp-c h-s" style="background-image: url('...');">
  <div class="p-10"></div>
</div>

Round

The background image will be repeated and resized to fit the area.

<div class="br-ro bp-c h-s" style="background-image: url('...');">
  <div class="p-10"></div>
</div>

Repeat X

The background image will be repeated horizontally only.

<div class="br-rx bp-c h-s" style="background-image: url('...');">
  <div class="p-10"></div>
</div>

Repeat Y

The background image will be repeated vertically only.

<div class="br-ry bp-c h-s" style="background-image: url('...');">
  <div class="p-10"></div>
</div>

Space

The background image will be repeated and spaced evenly.

<div class="br-s bp-c h-s" style="background-image: url('...');">
  <div class="p-10"></div>
</div>

Using utility variants

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Targeting different viewports

You can combine responsive breakpoints like sm:br-*, md:br-*, lg:br-*, and xxl:br-* to allow targeting specific utilities in different viewports.

Targeting hover states

Alternatively, you can apply :hover by using h:br-* utility to override elements and change their values when hovering over them.