Skip to content

Background Size

Controls the size of the background image of an element.

UtilityProperties
Failed to load data. Please try again later.

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:bs-*,md:bs-*, lg:bs-*, and xxl:bs-* 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:bs-* utility to override elements and change their values when hovering over them.

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