Background Size

Utilities for controlling the background size of an element's background image.

Class	Properties
.bg-cover	background-size: cover;
.bg-contain	background-size: contain;
.bg-auto	background-size: auto;

Cover

Use .bg-cover to scale the background image until it fills the background layer.

Contain

Use .bg-contain to scale the background image to the outer edges without cropping or stretching.

Auto

Use .bg-auto to display the background image at its default size.

Variants

By default, only responsive variants are generated for this utility. You can control which variants are generated by modifying the $utility-configuration in _settings.scss.