Background Position

Controls the position of the background image of an element.

Class	Style
`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(/img/clivia.jpg)"></div>
  <div class="bp-t d-24 rad-1" style="background-image:url(/img/clivia.jpg)"></div>
  <div class="bp-rt d-24 rad-1" style="background-image:url(/img/clivia.jpg)"></div>
  <div class="bp-l d-24 rad-1" style="background-image:url(/img/clivia.jpg)"></div>
  <div class="bp-c d-24 rad-1" style="background-image:url(/img/clivia.jpg)"></div>
  <div class="bp-r d-24 rad-1" style="background-image:url(/img/clivia.jpg)"></div>
  <div class="bp-lb d-24 rad-1" style="background-image:url(/img/clivia.jpg)"></div>
  <div class="bp-b d-24 rad-1" style="background-image:url(/img/clivia.jpg)"></div>
  <div class="bp-rb d-24 rad-1" style="background-image:url(/img/clivia.jpg)"></div>
</div>

Using utility variants

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

Using media queries

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

Using hover states

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