Background Size

Utility	Properties
bs-auto	background-size: auto;
bs-c	background-size: cover;
bs-co	background-size: contain;

Auto

Initial value

This example sets the background size to auto. The background image retains its original size.

<div class="d-30 rad-1">
  <div class="bs-auto bp-c h-30 rad-1" style="background-image:url(https://picsum.photos/300?image=870)"></div>
</div>

Cover

This example sets the background size to cover. The background image will cover the entire element.

<div class="d-30 rad-1">
  <div class="bs-c bp-c h-30 rad-1" style="background-image:url(https://picsum.photos/300?image=870)"></div>
</div>

Contain

This example sets the background size to contain. The background image will be scaled to fit within the element.

<div class="d-30 rad-1">
  <div class="bs-co bp-c h-30 rad-1" style="background-image:url(https://picsum.photos/300?image=870)"></div>
</div>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Media modifier

You can combine responsive breakpoints like sm:-*,md:-*, lg:-*, and xxl:-* allows targeting specific utilities in different viewports.

<div class="bs-auto md:bs-c ..."></div>

Hover modifier

Alternatively, you can apply :hover by using h:-* utility to override elements and change their values when hovering over them.

<div class="bs-auto h:bs-c ..."></div>