Defines the size of a background image.
| Class | Properties |
|---|---|
| bg-auto | background-size: auto; |
| bg-cover | background-size: cover; |
| bg-contain | background-size: contain; |
Image is displayed in its original size.
<div class="overflow-hidden">
<div class="bg-auto bg-no-repeat bg-center bg-primary border-round h-20rem w-full" style="background-image: url('images/product-placeholder-blue.svg');"></div>
</div>
Image is resized to cover the container fully by stretching of clipping if necessary.
<div class="overflow-hidden">
<div class="bg-cover bg-center border-primary-500 border-2 border-round h-20rem w-full" style="background-image: url('images/product-placeholder-yellow.svg');"></div>
</div>
Image is resized to fill the container
<div class="overflow-hidden">
<div class="bg-contain bg-center bg-no-repeat bg-primary border-round h-20rem w-full" style="background-image: url('images/product-placeholder-green.svg');"></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-contain 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">
<div class="bg-cover md:bg-contain bg-center bg-no-repeat bg-primary border-round h-20rem w-full" style="background-image: url('images/product-placeholder-purple.svg');"></div>
</div>