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