Background Position

<dt-stack align="center" class="d-g-50">
  <div class="d-size-200 d-bgc-moderate d-bar-400 d-of-hidden d-bgr-none d-bgs-var d-bgp-tl" style="--bgg-size: 65% 65%; background-image: url('/assets/images/puffin.jpg');"></div>
  <dt-text as="code" kind="code" size="100">d-bgp-tl</dt-text>
</dt-stack>
<dt-stack align="center" class="d-g-50">
  <div class="d-size-200 d-bgc-moderate d-bar-400 d-of-hidden d-bgr-none d-bgs-var d-bgp-t" style="--bgg-size: 65% 65%; background-image: url('/assets/images/puffin.jpg');"></div>
  <dt-text as="code" kind="code" size="100">d-bgp-t</dt-text>
</dt-stack>
<dt-stack align="center" class="d-g-50">
  <div class="d-size-200 d-bgc-moderate d-bar-400 d-of-hidden d-bgr-none d-bgs-var d-bgp-tr" style="--bgg-size: 65% 65%; background-image: url('/assets/images/puffin.jpg');"></div>
  <dt-text as="code" kind="code" size="100">d-bgp-tr</dt-text>
</dt-stack>
<dt-stack align="center" class="d-g-50">
  <div class="d-size-200 d-bgc-moderate d-bar-400 d-of-hidden d-bgr-none d-bgs-var d-bgp-r" style="--bgg-size: 65% 65%; background-image: url('/assets/images/puffin.jpg');"></div>
  <dt-text as="code" kind="code" size="100">d-bgp-r</dt-text>
</dt-stack>
<dt-stack align="center" class="d-g-50">
  <div class="d-size-200 d-bgc-moderate d-bar-400 d-of-hidden d-bgr-none d-bgs-var d-bgp-br" style="--bgg-size: 65% 65%; background-image: url('/assets/images/puffin.jpg');"></div>
  <dt-text as="code" kind="code" size="100">d-bgp-br</dt-text>
</dt-stack>
<dt-stack align="center" class="d-g-50">
  <div class="d-size-200 d-bgc-moderate d-bar-400 d-of-hidden d-bgr-none d-bgs-var d-bgp-b" style="--bgg-size: 65% 65%; background-image: url('/assets/images/puffin.jpg');"></div>
  <dt-text as="code" kind="code" size="100">d-bgp-b</dt-text>
</dt-stack>
<dt-stack align="center" class="d-g-50">
  <div class="d-size-200 d-bgc-moderate d-bar-400 d-of-hidden d-bgr-none d-bgs-var d-bgp-bl" style="--bgg-size: 65% 65%; background-image: url('/assets/images/puffin.jpg');"></div>
  <dt-text as="code" kind="code" size="100">d-bgp-bl</dt-text>
</dt-stack>
<dt-stack align="center" class="d-g-50">
  <div class="d-size-200 d-bgc-moderate d-bar-400 d-of-hidden d-bgr-none d-bgs-var d-bgp-l" style="--bgg-size: 65% 65%; background-image: url('/assets/images/puffin.jpg');"></div>
  <dt-text as="code" kind="code" size="100">d-bgp-l</dt-text>
</dt-stack>
<dt-stack align="center" class="d-g-50">
  <div class="d-size-200 d-bgc-moderate d-bar-400 d-of-hidden d-bgr-none d-bgs-var d-bgp-center" style="--bgg-size: 65% 65%; background-image: url('/assets/images/puffin.jpg');"></div>
  <dt-text as="code" kind="code" size="100">d-bgp-center</dt-text>
</dt-stack>
<dt-stack align="center" class="d-g-50">
  <div class="d-size-200 d-bgc-moderate d-bar-400 d-of-hidden d-bgr-none d-bgs-var d-bgp-unset" style="--bgg-size: 65% 65%; background-image: url('/assets/images/puffin.jpg');"></div>
  <dt-text as="code" kind="code" size="100">d-bgp-unset</dt-text>
</dt-stack>