Dialtone

Background Size

Utilities for controlling an element's background size.

Classes

ClassOutput
.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;

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>
Last Updated: