Background position

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

In this article

Class Properties
.bg-top background-position: top;
.bg-right background-position: right;
.bg-bottom background-position: bottom;
.bg-left background-position: left;
.bg-center background-position: center;
.bg-right-top background-position: right-top;
.bg-right-bottom background-position: right-bottom;
.bg-left-top background-position: left top;
.bg-left-bottom background-position: left bottom;

Usage

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

<div class="bg-gray-100 bg-no-repeat border bg-left-top"></div>
<div class="bg-gray-100 bg-no-repeat border bg-top"></div>
<div class="bg-gray-100 bg-no-repeat border bg-right-top"></div>
<div class="bg-gray-100 bg-no-repeat border bg-left"></div>
<div class="bg-gray-100 bg-no-repeat border bg-center"></div>
<div class="bg-gray-100 bg-no-repeat border bg-right"></div>
<div class="bg-gray-100 bg-no-repeat border bg-left-bottom"></div>
<div class="bg-gray-100 bg-no-repeat border bg-bottom"></div>
<div class="bg-gray-100 bg-no-repeat border bg-right-bottom"></div>

Variants

By default, only responsive variants are generated for background position utilities.

Responsive

To control the background size for an element at a specific breakpoint, add a {screen}: prefix to any existing background position utility.

For example, use .md:bg-center to apply the bg-center utility at only medium screen sizes and above.

Hover-state

To include hover-state variants like .hover:bg-center, add "background-position" to the $hover-variants variable when recompiling your CSS:

$hover-variants: (
  // ...
  "background-position",
);

Questions or feedback about this article? Let us know