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