⌘ K
esc

    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">
        <div class="card-container blue-container overflow-hidden">
            <div class="bg-repeat bg-blue-100 border-blue-500 border-2 border-round w-full" style="background-image: url('./assets/images/product-placeholder-blue.svg'); background-size: 10rem; height: 30rem"></div>
        </div>
    </div>
    
    
    No Repeat

    Background image is not repeated.

    
    <div class="card">
        <div class="flex align-items-center justify-content-center card-container yellow-container overflow-hidden">
            <div class="bg-no-repeat bg-yellow-100 bg-center w-19rem h-19rem bg-yellow-500 border-2 border-yellow-500 border-round" style="background-image: url('./assets/images/product-placeholder-yellow.svg')"></div>
        </div>
    </div>
    
    
    Repeat Horizontally

    Background image is repeated horizontally only.

    
    <div class="card">
        <div class="card-container green-container overflow-hidden">
            <div class="bg-repeat-x bg-green-100 bg-center border-green-500 border-2 border-round h-10rem w-full" style="background-image: url('./assets/images/product-placeholder-green.svg'); background-size: 10rem"></div>
        </div>
    </div>
    
    
    Repeat Vertically

    Background image is repeated vertically only.

    
    <div class="card">
        <div  class="flex justify-content-center card-container purple-container overflow-hidden">
            <div class="bg-repeat-y bg-purple-100 bg-center h-20rem w-10rem border-purple-500 border-2 border-round" style="background-image: url('./assets/images/product-placeholder-purple.svg'); background-size: 10rem"></div>
        </div>
    </div>
    
    
    Repeat Round

    Background image is repeated or stretched to fill space

    
    <div class="card">
        <div class="card-container indigo-container overflow-hidden">
            <div class="bg-repeat-round bg-indigo-100 border-indigo-500 border-round border-2 h-20rem w-full" style="background-image: url('./assets/images/product-placeholder-indigo.svg'); background-size: 10rem"></div>
        </div>
    </div>
    
    
    Repeat Space

    Background image is repeated without clipping.

    
    <div class="card">
        <div class="card-container orange-container overflow-hidden">
            <div class="bg-repeat-space bg-orange-100 bg-center border-orange-500 border-2 border-round h-12rem w-full" style="background-image: url('./assets/images/product-placeholder-orange.svg'); background-size: 10rem"></div>
        </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">
        <div class="flex align-items-center card-container cyan-container overflow-hidden">
            <div class="bg-repeat-round md:bg-repeat-space bg-cyan-100 border-cyan-500 border-2 border-round h-21rem w-full" style="background-image: url('./assets/images/product-placeholder-cyan.svg'); background-size: 10rem"></div>
        </div>
    </div>