How to Set Background Images in Tailwind CSS

There are several ways to use background images in Tailwind CSS. In this tutorial, we demonstrate the most common ways to set background images in Tailwind CSS.

Native CSS

You can set background image using native CSS, for example:

<div style="background-image: url('/images/my.jpg');"></div>

Tailwind CSS will respect this background image property.

Arbitrary Value

You can also use square brackets to generate a property on the fly using any arbitrary value:

<div class="bg-[url('/images/my.jpg')]"></div>

Tailwind Config

Lastly if you need a reusable background class. You can do so in the tailwind.config.js file.

extend: {
  backgroundImage: {
    'my': "url('/images/my.jpg')",
  },
}

In the extend section of the configuration file, create your own background image class.

Now you can use it as a normal Tailwind CSS class:

<div class="bg-my"></div>