Dialtone

Background Position

Utilities for controlling the position of an element's background image.

Classes

ClassOutput
.d-bgp-tl background-position: top left !important;
.d-bgp-t background-position: top !important;
.d-bgp-tr background-position: top right !important;
.d-bgp-r background-position: right !important;
.d-bgp-br background-position: bottom right !important;
.d-bgp-b background-position: bottom !important;
.d-bgp-bl background-position: bottom left !important;
.d-bgp-l background-position: left !important;
.d-bgp-center background-position: center !important;
.d-bgp-unset background-position: unset !important;

Usage

Use d-bgp-{position} to control where an element's background image is placed.

<div class="d-bgr-none d-bgs-var d-bgp-tl" style="--bgg-size: 65% 65%; background-image: url(...);">...</div>
<div class="d-bgr-none d-bgs-var d-bgp-t" style="--bgg-size: 65% 65%; background-image: url(...);">...</div>
<div class="d-bgr-none d-bgs-var d-bgp-tr" style="--bgg-size: 65% 65%; background-image: url(...);">...</div>
<div class="d-bgr-none d-bgs-var d-bgp-r" style="--bgg-size: 65% 65%; background-image: url(...);">...</div>
<div class="d-bgr-none d-bgs-var d-bgp-bl" style="--bgg-size: 65% 65%; background-image: url(...);">...</div>
<div class="d-bgr-none d-bgs-var d-bgp-b" style="--bgg-size: 65% 65%; background-image: url(...);">...</div>
<div class="d-bgr-none d-bgs-var d-bgp-br" style="--bgg-size: 65% 65%; background-image: url(...);">...</div>
<div class="d-bgr-none d-bgs-var d-bgp-l" style="--bgg-size: 65% 65%; background-image: url(...);">...</div>
Last Updated: