Background Position

Utility	Properties
bp-b	background-position: bottom;
bp-c	background-position: center;
bp-l	background-position: left;
bp-lb	background-position: left bottom;
bp-lt	background-position: left top;
bp-r	background-position: right;
bp-rb	background-position: right bottom;
bp-rt	background-position: right top;
bp-t	background-position: top;

This example showcases various background-position utilities:

• The bottom background position utility aligns the image element to the bottom edge of the element.
• The center background position utility centers the image element within the element.
• The left background position utility aligns the image element to the left edge of the element.
• The right background position utility aligns the image element to the right edge of the element.
• The top background position utility aligns the image element to the top edge of the element.

<div class="d-g g-1 gtc-3">
  <div class="bp-lt d-24 rad-1" style="background-image:url(https://picsum.photos/300?image=360)"></div>
  <div class="bp-t d-24 rad-1" style="background-image:url(https://picsum.photos/300?image=360)"></div>
  <div class="bp-rt d-24 rad-1" style="background-image:url(https://picsum.photos/300?image=360)"></div>
  <div class="bp-l d-24 rad-1" style="background-image:url(https://picsum.photos/300?image=360)"></div>
  <div class="bp-c d-24 rad-1" style="background-image:url(https://picsum.photos/300?image=360)"></div>
  <div class="bp-r d-24 rad-1" style="background-image:url(https://picsum.photos/300?image=360)"></div>
  <div class="bp-lb d-24 rad-1" style="background-image:url(https://picsum.photos/300?image=360)"></div>
  <div class="bp-b d-24 rad-1" style="background-image:url(https://picsum.photos/300?image=360)"></div>
  <div class="bp-rb d-24 rad-1" style="background-image:url(https://picsum.photos/300?image=360)"></div>
</div>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Media modifier

You can combine responsive breakpoints like sm:-*,md:-*, lg:-*, and xxl:-* allows targeting specific utilities in different viewports.

<div class="bp-l md:bp-r ..."></div>

Hover modifier

Alternatively, you can apply :hover by using h:-* utility to override elements and change their values when hovering over them.

<div class="bp-l h:bp-r ..."></div>