Background Size

@include('_partials.class-table', [ 'rows' => [ [ '.bg-auto', 'background-size: auto;', "Display the image at its default size.", ], [ '.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.", ], ] ])

Auto

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

@component('_partials.code-sample')

@slot('code')@endslot @endcomponent

Cover

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

@component('_partials.code-sample')

@slot('code')@endslot @endcomponent

Contain

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

@component('_partials.code-sample')

@slot('code')@endslot @endcomponent

Responsive

To control the size of an element's background image at a specific breakpoint, add a {screen}: prefix to any existing background size utility. For example, adding the class md:bg-contain to an element would apply the bg-contain utility at medium screen sizes and above.

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.

@component('_partials.responsive-code-sample') @slot('none')

@endslot

@slot('sm')

@endslot

@slot('md')

@endslot

@slot('lg')

@endslot

@slot('xl')

@endslot

@slot('code')

@endslot @endcomponent

Customizing

By default Tailwind provides utilities for auto, cover, and contain background sizes. You can change, add, or remove these by editing the theme.backgroundSize section of your config.

@component('_partials.customized-config', ['key' => 'theme.backgroundSize']) 'auto': 'auto', 'cover': 'cover', 'contain': 'contain',

• '50%': '50%',
• '16': '4rem', @endcomponent

@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'background size', 'property' => 'backgroundSize', ], 'variants' => [ 'responsive', ], ])