Background Position

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