Controls how a background image is repeated.
| 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; |
Background image is repeated both vertically and horizontally.
<div class="overflow-hidden">
<div class="bg-repeat bg-primary-100 border-primary-500 border-2 border-round w-full" style="background-image: url('/images/product-placeholder-blue.svg'); background-size: 10rem; height: 30rem"></div>
</div>
Background image is not repeated.
<div class="flex align-items-center justify-content-center overflow-hidden">
<div class="bg-no-repeat bg-primary-100 bg-center w-19rem h-19rem bg-primary border-2 border-primary-500 border-round" style="background-image: url('/images/product-placeholder-yellow.svg')"></div>
</div>
Background image is repeated horizontally only.
<div class="overflow-hidden">
<div class="bg-repeat-x bg-primary-100 bg-center border-primary-500 border-2 border-round h-10rem w-full" style="background-image: url('/images/product-placeholder-green.svg');background-size: 10rem"></div>
</div>
Background image is repeated vertically only.
<div class="flex justify-content-center overflow-hidden">
<div class="bg-repeat-y bg-primary-100 bg-center h-20rem w-10rem border-primary-500 border-2 border-round" style="background-image: url('/images/product-placeholder-purple.svg');background-size: 10rem"></div>
</div>
Background image is repeated or stretched to fill space
<div class="overflow-hidden">
<div class="bg-repeat-round bg-indigo-100 border-primary-500 border-round border-2 h-20rem w-full" style="background-image: url('/images/product-placeholder-indigo.svg');background-size: 10rem"></div>
</div>
Background image is repeated without clipping.
<div class="overflow-hidden">
<div class="bg-repeat-space bg-primary-100 bg-center border-primary-500 border-2 border-round h-12rem w-full" style="background-image: url('/images/product-placeholder-orange.svg');background-size: 10rem"></div>
</div>
Responsive alternatives are available for customizations based on screen size. Add the responsive breakpoint keyword followed by a semi-colon as a prefix such as md:bg-repeat to use a responsive class.
| Class | Description |
|---|---|
| sm: | small screens e.g. phones |
| md: | medium screens e.g. tablets |
| lg: | large screens e.g. notebooks |
| xl: | larger screens e.g monitors |
<div class="flex align-items-center overflow-hidden">
<div class="bg-repeat-round md:bg-repeat-space bg-cyan-100 border-primary-500 border-2 border-round h-21rem w-full" style="background-image: url('/images/product-placeholder-cyan.svg');background-size: 10rem"></div>
</div>