Configures the starting position of a background image.
| 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; |
<div class="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-primary border-round m-3" style="background-image: url('/images/product-placeholder-blue.svg'); background-size: 5rem;"></div>
<div class="bg-top bg-no-repeat w-10rem h-10rem bg-primary border-round m-3" style="background-image: url('/images/product-placeholder-blue.svg'); background-size: 5rem;"></div>
<div class="bg-right-top bg-no-repeat w-10rem h-10rem bg-primary border-round m-3" style="background-image: url('/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-primary border-round m-3" style="background-image: url('/images/product-placeholder-blue.svg'); background-size: 5rem;"></div>
<div class="bg-center bg-no-repeat w-10rem h-10rem bg-primary border-round m-3" style="background-image: url('/images/product-placeholder-blue.svg'); background-size: 5rem;"></div>
<div class="bg-right bg-no-repeat w-10rem h-10rem bg-primary border-round m-3" style="background-image: url('/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-primary border-round m-3" style="background-image: url('/images/product-placeholder-blue.svg'); background-size: 5rem;"></div>
<div class="bg-left-bottom bg-no-repeat w-10rem h-10rem bg-primary border-round m-3" style="background-image: url('/images/product-placeholder-blue.svg'); background-size: 5rem;"></div>
<div class="bg-right-bottom bg-no-repeat w-10rem h-10rem bg-primary border-round m-3" style="background-image: url('/images/product-placeholder-blue.svg'); background-size: 5rem;"></div>
</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-bottom 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="overflow-hidden flex align-items-center justify-content-center">
<div class="bg-top md:bg-bottom bg-no-repeat w-10rem h-10rem bg-primary border-round m-3" style="background-image: url('images/product-placeholder-yellow.svg');background-size: 5rem"></div>
</div>