Background Size

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

Auto

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, potentially cropping the image.

<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, maintaining its aspect ratio.

<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 modifiers

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

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

Hover modifiers

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

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