Backgrounds

Background Position

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

Quick reference

Class	Description
bg-bottom	background-position: bottom
bg-center	background-position: center
bg-left	background-position: left
bg-left-bottom	background-position: left bottom
bg-left-top	background-position: left top
bg-right	background-position: right
bg-right-bottom	background-position: right bottom
bg-right-top	background-position: right top
bg-top	background-position: top

Basic usage

Setting the background position

Use the bg-{side} utilities to control the position of an element’s background image.

bg-left-top

bg-top

bg-right-top

bg-left

bg-center

bg-right

bg-left-bottom

bg-bottom

bg-right-bottom

<div class="bg-left-top ..."></div>
<div class="bg-top ..."></div>
<div class="bg-right-top ..."></div>
<div class="bg-left ..."></div>
<div class="bg-center ..."></div>
<div class="bg-right ..."></div>
<div class="bg-left-bottom ..."></div>
<div class="bg-bottom ..."></div>
<div class="bg-right-bottom ..."></div>

Arbitrary values

If you need to use a one-off background-position value, use square brackets to generate a property on the fly using any arbitrary value.

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

Applying conditionally

Hover, focus, and other states

Warp lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:bg-top to only apply the bg-top utility on hover.

<div class="bg-center hover:bg-top ..."></div>

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:bg-top to apply the bg-top utility at only medium screen sizes and above.

<div class="bg-center md:bg-top ..."></div>