⌘ K
esc

    Background Position

    Configures the starting position of a background image.

    Classes
    Class Properties
    bg-bottom background-position: bottom;
    bg-center background-position: center;
    bg-left background-position: left;
    bg-left-bottom background-position: left bottom;
    bg-left-top background-position: left top;
    bg-right background-position: right;
    bg-right-top background-position: right top;
    bg-right-bottom background-position: right bottom;
    bg-top background-position: top;
    Examples
    
    <div class="card">
        <div class="card-container blue-container overflow-hidden">
            <div class="flex flex-wrap align-items-center justify-content-center">
                <div class="bg-left-top bg-no-repeat w-10rem h-10rem bg-blue-500 border-round m-3" style="background-image: url('./assets/images/product-placeholder-blue.svg'); background-size: 5rem;"></div>
                <div class="bg-top bg-no-repeat w-10rem h-10rem bg-blue-500 border-round m-3" style="background-image: url('./assets/images/product-placeholder-blue.svg'); background-size: 5rem;"></div>
                <div class="bg-right-top bg-no-repeat w-10rem h-10rem bg-blue-500 border-round m-3" style="background-image: url('./assets/images/product-placeholder-blue.svg'); background-size: 5rem;"></div>
            </div>
            <div class="flex flex-wrap align-items-center justify-content-center">
                <div class="bg-left bg-no-repeat w-10rem h-10rem bg-blue-500 border-round m-3" style="background-image: url('./assets/images/product-placeholder-blue.svg'); background-size: 5rem;"></div>
                <div class="bg-center bg-no-repeat w-10rem h-10rem bg-blue-500 border-round m-3" style="background-image: url('./assets/images/product-placeholder-blue.svg'); background-size: 5rem;"></div>
                <div class="bg-right bg-no-repeat w-10rem h-10rem bg-blue-500 border-round m-3" style="background-image: url('./assets/images/product-placeholder-blue.svg'); background-size: 5rem;"></div>
            </div>
            <div class="flex flex-wrap align-items-center justify-content-center">
                <div class="bg-bottom bg-no-repeat w-10rem h-10rem bg-blue-500 border-round m-3" style="background-image: url('./assets/images/product-placeholder-blue.svg'); background-size: 5rem;"></div>
                <div class="bg-left-bottom bg-no-repeat w-10rem h-10rem bg-blue-500 border-round m-3" style="background-image: url('./assets/images/product-placeholder-blue.svg'); background-size: 5rem;"></div>
                <div class="bg-right-bottom bg-no-repeat w-10rem h-10rem bg-blue-500 border-round m-3" style="background-image: url('./assets/images/product-placeholder-blue.svg'); background-size: 5rem;"></div>
            </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-top 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 yellow-container overflow-hidden flex align-items-center justify-content-center">
            <div class="bg-top md:bg-bottom bg-no-repeat w-10rem h-10rem bg-yellow-500 border-round m-3" style="background-image: url('./assets/images/product-placeholder.svg'); background-size: 5rem;"></div>
        </div>
    </div>