| 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",
);