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 overflow-hidden p-5">
    <div class="bg-auto bg-no-repeat bg-center shadow-1 w-full" style="background-image: url('./assets/images/product-placeholder.svg'); height: 20rem"></div>
</div>

Cover

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


<div class="card overflow-hidden p-5">
    <div class="bg-cover bg-center shadow-1 w-full" style="background-image: url('./assets/images/product-placeholder.svg'); height: 20rem"></div>
</div>

Contain

Image is resized to fill the container


<div class="card overflow-hidden p-5">
    <div class="bg-contain bg-center bg-no-repeat shadow-1 w-full" style="background-image: url('./assets/images/product-placeholder.svg'); height: 20rem"></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 overflow-hidden p-5">
    <div class="bg-cover md:bg-contain bg-center bg-no-repeat shadow-1 w-full" style="background-image: url('./assets/images/product-placeholder.svg'); height: 20rem"></div>
</div>