Background Size

Utilities for controlling an element's background size.

Usage

Use d-bgs-{n} to control the size of element's background image.

<div class="d-bgr-none d-bgs-contain" style="background-image: url(...);">...</div>
<div class="d-bgr-none d-bgs-cover" style="background-image: url(...);">...</div>
<div class="d-bgr-none d-bgs-var" style="--bgg-size: 65% 65%; background-image: url(...);">...</div>
<div class="d-bgr-none d-bgs-auto d-bgp-center" style="background-image: url(...);">...</div>
<div class="d-bgr-none d-bgs-unset" style="background-image: url(...);">...</div>

Classes

Class
Output
.d-bgp-contain background-size: contain !important;
.d-bgp-cover background-size: cover !important;
.d-bgp-var background-size: var(--bgg-size, 100% 100%);
.d-bgp-auto background-size: auto !important;
.d-bgp-unset background-size: unset !important;
Background Size documentation last updated Thursday, June 11, 2026