# How to work with background images in Tailwind CSS

*This post was originally posted on* [Design2Tailwind](https://design2tailwind.com/blog/tailwindcss-background-image/)*.*

---

There are multiple ways to work with background images using Tailwind but I’ll show you the 3 most common (and recommended) ways to do it on your project.

## Via the tailwind config:

Let’s start the old-fashioned way, by adding it to the tailwind config. This is great if you want to reuse the image in multiple places in your project.

I recommend you add it in the `extend` object of your config, like this:

```javascript
  extend: {
      backgroundImage: {
        'hero': "url('../public/images/hero.jpg')",
      },
  }
```

Then in your HTML you use it like this:

```javascript
<div class="bg-hero"></div>
```

## Via the `style` attribute:

If you prefer to skip the config then you can just add it using the `style` attribute, like this:

```javascript
<div style="background-image: url('../public/images/hero.jpg');"></div>
```

This is good if you plan to add more inline styles to your element or even perform some conditional logic with the image.

## Via using an arbitrary value:

Now in V3, you can do this fancy syntax too. If you prefer not to use inline styles and have a single-use image then this is the best approach.

```javascript
<div class="bg-[url('../public/images/hero.jpg')]"></div>
```

## But you’ll also need these properties

Following our example of a hero background image, once you have your image showing on your page then you’ll also want to:

* Make it not repeatable by using `bg-no-repeat`
    
* Have it use all the available space by adding `bg-cover`
    
* Positioning it in the center by using `bg-center`
    
* Possibly make it parallax with `bg-fixed`
    

Here’s the finished markup for you:

```javascript
<div class="bg-hero bg-no-repeat bg-cover bg-center bg-fixed"></div>
```

Here’s also a [Tailwind Play](https://play.tailwindcss.com/oT80ySVJ6f) example you can play around with.

## Disable/change the image in specific breakpoints

This is a pro tip for you, for example let’s say that you want to disable the background image in tablets and use a different image for desktop, this is where the arbitrary value approach really shines:

```javascript
<div
	class="
		bg-no-repeat bg-cover bg-center
		bg-[url('../public/images/hero-mobile.jpg')]
		md:bg-none
		xl:bg-[url('../public/images/hero-desktop.jpg')]
"></div>
```

---

That’s it for this one! I hope you learned the multiple ways to use background images with Tailwind CSS and how to use them on your project.