tailwindcss/docs/source/docs/background-size.blade.md

extends	title	description	features
_layouts.documentation	Background Size	Utilities for controlling the background size of an element's background image.	responsive customizable hover focus true false false false

@include('_partials.work-in-progress')

@include('_partials.class-table', [ 'rows' => [ [ '.bg-cover', 'background-size: cover;', "Scale the image until it fills the background layer.", ], [ '.bg-contain', 'background-size: contain;', "Scale the image to the outer edges without cropping or stretching.", ], ] ])

Customizing

Responsive, Hover, and Focus Variants

By default, no hover, focus, or group-hover variants are generated for background size utilities.

You can control which variants are generated for the background size utilities by modifying the backgroundSize property in the modules section of your Tailwind config file.

For example, this config will also generate hover and focus variants:

{
    // ...
    modules: { 
        // ...
        backgroundSize: ['responsive', 'hover', 'focus'],
    }
}

k

Disabling

If you aren't using the background size utilities in your project, you can disable them entirely by setting the backgroundSize property to false in the modules section of your config file:

{
    // ...
    modules: {
        // ...
        backgroundSize: false,
    }
}