Backgrounds
Background Repeat
Utilities for controlling the repetition of an element's background image.
Quick reference
| Class | Description |
|---|---|
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 |
Basic usage
Repeat
Use bg-repeat to repeat the background image both vertically and horizontally.
html
<div class="bg-repeat ..."></div>No Repeat
Use bg-no-repeat when you don’t want to repeat the background image.
html
<div class="bg-no-repeat ..."></div>Repeat Horizontally
Use bg-repeat-x to repeat the background image only horizontally.
html
<div class="bg-repeat-x ..."></div>Repeat Vertically
Use bg-repeat-y to repeat the background image only vertically.
html
<div class="bg-repeat-y ..."></div>