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;


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


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


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


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.