Background Repeat

Controls how a background image is repeated.

Classes
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;
Repeat

Background image is repeated both vertically and horizontally.


<div class="card overflow-hidden p-5">
    <div class="bg-repeat shadow-1 w-full" style="background-image: url('./assets/images/product-placeholder.svg'); height: 30rem"></div>
</div>

No Repeat

Background image is not repeated.


<div class="card overflow-hidden p-5">
    <div class="bg-no-repeat bg-center shadow-1 w-full" style="background-image: url('./assets/images/product-placeholder.svg'); height: 20rem"></div>
</div>

Repeat Horizontally

Background image is repeated horizontally only.


<div class="card overflow-hidden p-5">
    <div class="bg-repeat-x bg-center shadow-1 w-full" style="background-image: url('./assets/images/product-placeholder.svg'); height: 20rem"></div>
</div>

Repeat Vertically

Background image is repeated vertically only.


<div class="card overflow-hidden p-5">
    <div class="bg-repeat-y bg-center shadow-1 w-full" style="background-image: url('./assets/images/product-placeholder.svg'); height: 36rem"></div>
</div>

Repeat Round

Background image is repeated or stretched to fill space


<div class="card overflow-hidden p-5">
    <div class="bg-repeat-round shadow-1 w-full" style="background-image: url('./assets/images/product-placeholder.svg'); height: 30rem"></div>
</div>

Repeat Space

Background image is repeated without clipping.


<div class="card overflow-hidden p-5">
    <div class="bg-repeat-space bg-center shadow-1 w-full" style="background-image: url('./assets/images/product-placeholder.svg'); height: 36rem"></div>
</div>

Responsive

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.

  • 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="card overflow-hidden p-5">
    <div class="bg-repeat-round md:bg-repeat-space shadow-1 w-full" style="background-image: url('./assets/images/product-placeholder.svg'); height: 36rem"></div>
</div>