| Class | Properties |
|---|---|
.bg-auto | background-size: auto; |
.bg-cover | background-repeat: cover; |
.bg-contain | background-repeat: contain; |
Usage
Auto
Use .bg-auto to display the background image at its default size.
<div class="bg-auto bg-center bg-gray-200"></div>Cover
Use .bg-cover to scale the background image until it fills the background layer.
<div class="bg-cover bg-center bg-gray-200"></div>Contain
Use .bg-contain to scale the background image to the outer edges without cropping or stretching.
<div class="bg-contain bg-center bg-gray-200"></div>Variants
By default, only responsive variants are generated for background size utilities.
Responsive
To control the background size for an element at a specific breakpoint, add a {screen}: prefix to any existing background size utility.
For example, use .md:bg-contain to apply the bg-contain utility at only medium screen sizes and above.
Hover-state
To include hover-state variants like .hover:bg-contain, add "background-size" to the $hover-variants variable when recompiling your CSS:
$hover-variants: (
// ...
"background-size",
);