⌘ K
esc

    Background Size

    Defines the size of a background image.

    Classes
    Class Properties
    bg-auto background-size: auto;
    bg-cover background-size: cover;
    bg-contain background-size: contain;
    Auto

    Image is displayed in its original size.

    
    <div class="card">
        <div class="card-container blue-container overflow-hidden">
            <div class="bg-auto bg-no-repeat bg-center bg-blue-500 border-round h-20rem w-full" style="background-image: url('./assets/images/product-placeholder.svg');"></div>
        </div>
    </div>
    
    
    Cover

    Image is resized to cover the container fully by stretching of clipping if necessary.

    
    <div class="card">
        <div class="card-container yellow-container overflow-hidden">
            <div class="bg-cover bg-center border-yellow-500 border-2 border-round h-20rem w-full" style="background-image: url('./assets/images/product-placeholder.svg')"></div>
        </div>
    </div>
    
    
    Contain

    Image is resized to fill the container

    
    <div class="card">
        <div class="card-container green-container overflow-hidden">
            <div class="bg-contain bg-center bg-no-repeat bg-green-500 border-round h-20rem w-full" style="background-image: url('./assets/images/product-placeholder.svg')"></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-contain 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="card-container purple-container overflow-hidden">
            <div class="bg-cover md:bg-contain bg-center bg-no-repeat bg-purple-500 border-round h-20rem w-full" style="background-image: url('./assets/images/product-placeholder.svg')"></div>
        </div>
    </div>