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 styles: top, bottom, left, right, center, and their combinations such as left top, left bottom, right top, and right bottom. Each section demonstrates how the background image is positioned within 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 modifiers

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

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

Hover modifiers

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

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