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 |
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>Tips
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.