Background size

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

In this article

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



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

<div class="bg-auto bg-center bg-gray-200"></div>


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

<div class="bg-cover bg-center bg-gray-200"></div>


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>


By default, only responsive variants are generated for background size utilities.


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.


To include hover-state variants like .hover:bg-contain, add "background-size" to the $hover-variants variable when recompiling your CSS:

$hover-variants: (
  // ...

Questions or feedback about this article? Let us know