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;

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

Questions or feedback about this article? Let us know