Background repeat

Syntax

Class
Properties
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;
bg-repeat-round
background-repeat: round;
bg-repeat-space
background-repeat: space;
<div class="t1 w-256 h-256 bg-c-white bg-center bg-size-128-90 bg-repeat shadow-4" style="background-image: url(/assets/tree.jpg?o1-cache=1);"></div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Repeat
t1 bg-repeat
.t1.bg-repeat { background-repeat: repeat; }
No repeat
t1 bg-no-repeat
.t1.bg-no-repeat { background-repeat: no-repeat; }
Repeat along X axis only
t1 bg-repeat-x
.t1.bg-repeat-x { background-repeat: repeat-x; }
Repeat along Y axis only
t1 bg-repeat-y
.t1.bg-repeat-y { background-repeat: repeat-y; }
Repeat and stretch the background image to cover the entire element whole number of times, using the closest (round) number of repetitions.
t1 bg-repeat-round
.t1.bg-repeat-round { background-repeat: round; }
Repeat the background image as many times as it fits onto the element without stretching. The background will shine through in the gaps.
t1 bg-repeat-space
.t1.bg-repeat-space { background-repeat: space; }