Background Image

v1.7.0+

Utilities for controlling an element’s background image.

To give an element a linear gradient background, use one of the utilities, in combination with the gradient color stop utilities.

For more information about Tailwind’s responsive design features, check out the documentation.

By default Tailwind includes background image utilities for creating linear gradient backgrounds in eight directions.

You can add your own background images by editing the theme.backgroundImage section of your file:

These don’t just have to be gradients — they can be any background images you need.

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

You can control which variants are generated for the background image utilities by modifying the backgroundImage property in the section of your tailwind.config.js file.

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

If you don’t plan to use the background image utilities in your project, you can disable them entirely by setting the backgroundImage property to false in the corePlugins section of your config file: