Background Size

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

    Use to display the background image at its default size.

    Cover

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

    1. <div class="bg-cover bg-center ..." style="background-image: url(...)"></div>

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

    Background Size - 图3

    Hover, focus, and other states

    Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:bg-contain to only apply the bg-contain utility on hover.

    1. <div class="bg-auto hover:bg-contain">
    2.   <!-- ... -->
    3. </div>

    For a complete list of all available state modifiers, check out the documentation.

    To learn more, check out the documentation on , Dark Mode and .

    Customizing your theme

    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.

    tailwind.config.js

    1. module.exports = {
    2.   theme: {
    4.       'cover': 'cover',
    5.       'contain': 'contain',
    6.       '50%': '50%',
    7.       '16': '4rem',
    8.     }
    9.   }
    10. }

    Learn more about customizing the default theme in the theme customization documentation.

    Learn more about arbitrary value support in the arbitrary values documentation.