Elements logo

Background position

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

Class reference

ClassProperties
bg-bottombackground-position: bottom;
bg-centerbackground-position: center;
bg-leftbackground-position: left;
bg-left-bottombackground-position: left bottom;
bg-left-topbackground-position: left top;
bg-rightbackground-position: right;
bg-right-bottombackground-position: right bottom;
bg-right-topbackground-position: right top;
bg-topbackground-position: top;

Usage

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-no-repeat bg-left-top ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-top ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-right-top ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-left ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-center ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-right ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-left-bottom ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-bottom ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-right-bottom ..." style="background-image: url(...);"></div>

Responsive

To control the position of an element’s background image at a specific breakpoint, add a {screen}: prefix to any existing background position utility. For example, adding the class md:bg-top to an element would apply the bg-top utility at medium screen sizes and above.

<div class="bg-center **md:bg-top** ..." style="background-image: url(...)"></div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.