Docs / Background Position

Background Position

vel-src: colors.css

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

ClassProperties
vel-bg-centerbackground-position: center
vel-bg-topbackground-position: top
vel-bg-top-rightbackground-position: top right
vel-bg-rightbackground-position: right
vel-bg-bottom-rightbackground-position: bottom right
vel-bg-bottombackground-position: bottom
vel-bg-bottom-leftbackground-position: bottom left
vel-bg-leftbackground-position: left
vel-bg-top-leftbackground-position: top left

Examples

Background position values

example.html
<div style="display:flex;gap:12px;padding:1rem;background:#060b17;flex-wrap:wrap;">
  <div class="vel-bg-top vel-bg-no-repeat" style="width:80px;height:80px;border-radius:6px;border:1px solid #1e2d45;background-image:url('https://placehold.co/40x40/7c5cfc/fff');background-color:#0d1422;" title="vel-bg-top"></div>
  <div class="vel-bg-center vel-bg-no-repeat" style="width:80px;height:80px;border-radius:6px;border:1px solid #1e2d45;background-image:url('https://placehold.co/40x40/7c5cfc/fff');background-color:#0d1422;" title="vel-bg-center"></div>
  <div class="vel-bg-bottom vel-bg-no-repeat" style="width:80px;height:80px;border-radius:6px;border:1px solid #1e2d45;background-image:url('https://placehold.co/40x40/7c5cfc/fff');background-color:#0d1422;" title="vel-bg-bottom"></div>
</div>