background position

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

2025-04-12

Written by: tdtc

ClassStyles
bg-top-leftbackground-position: top left;
bg-topbackground-position: top;
bg-top-rightbackground-position: top right;
bg-leftbackground-position: left;
bg-centerbackground-position: center;
bg-rightbackground-position: right;
bg-bottom-leftbackground-position: bottom left;
bg-bottombackground-position: bottom;
bg-bottom-rightbackground-position: bottom right;
bg-position-(<custom-property>)background-position: var(<custom-property>);
bg-position-[<value>]background-position: <value>;

Basic example

Use utilities like bg-center, bg-right, and bg-top-left to control the position of an element’s background image:

<div class="bg-[url(/img/mountains.jpg)] bg-top-left"></div>
<div class="bg-[url(/img/mountains.jpg)] bg-top"></div>
<div class="bg-[url(/img/mountains.jpg)] bg-top-right"></div>
<div class="bg-[url(/img/mountains.jpg)] bg-left"></div>
<div class="bg-[url(/img/mountains.jpg)] bg-center"></div>
<div class="bg-[url(/img/mountains.jpg)] bg-right"></div>
<div class="bg-[url(/img/mountains.jpg)] bg-bottom-left"></div>
<div class="bg-[url(/img/mountains.jpg)] bg-bottom"></div>
<div class="bg-[url(/img/mountains.jpg)] bg-bottom-right"></div>

Using a custom value

Use the bg-position-[] syntax to set the background position based on a completely custom value:

<div class="bg-position-[center_top_1rem] ...">
  <!-- ... -->
</div>

Ref