Set background image with TailwindCSS

You can use any background image in your template file using the arbitrary value syntax. This is useful if you cannot or do not want to modify the tailwind configuration file.

<div class="bg-[url('/img/bg_small.jpg')] w-32 h-32"></div>

If the background doesn't display correctly then check if the path is really correct. The best way is to check it on the developer console:

You can extend Tailwind configuration with background images and then use the custom utility class where you want the background image.

First list all of your background images in the tailwind.config.js file:

module.exports = {
  content: ['**/*.html'],
  theme: {
    extend: {
      backgroundImage: {
        'demo-bg-xl': "url('/img/bg_large.jpg')",
        'demo-bg-md': "url('/img/bg_medium.jpg')",
        'demo-bg-sm': "url('/img/bg_small.jpg')",
      }
    },
  },
  plugins: [],
}

As a result you can write code with auto completition like this:

<div class="bg-demo-bg-md w-32 h-32"></div>