Background Image

Linear gradients

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

<div class="h-24 bg-gradient-to-r from-orange-400 via-red-500 to-pink-500"></div>

Responsive

To control the background image of an element at a specific breakpoint, add a {screen}: prefix to any existing background image utility. For example, use md:bg-gradient-to-r to apply the bg-gradient-to-r utility at only medium screen sizes and above.

<div class="bg-gradient-to-r md:bg-gradient-to-t ..."></div>

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

Customizing

Background Images

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 tailwind.config.js file:

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        backgroundImage: theme => ({
+         'hero-pattern': "url('/img/hero-pattern.svg')",
+         'footer-texture': "url('/img/footer-texture.png')",
        })
      }
    }
  }

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

These classes will take the form bg-{key}, so hero-pattern will become bg-hero-pattern for example.

Responsive and pseudo-class variants

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 variants section of your tailwind.config.js file.

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

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     backgroundImage: ['responsive'],
+     backgroundImage: ['responsive', 'hover', 'focus'],
    }
  }

Disabling

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:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     backgroundImage: false,
    }
  }