Tailwind Background Image

A Tailwind background image is an image added to an HTML element using Tailwind's utility-first classes. This can include photos, gradients, or even custom patterns defined in your Tailwind configuration.

By using Tailwind’s utility classes like bg-cover, bg-fixed, or gradient-based utilities such as bg-gradient-to-r, you can easily control how the image appears on your web page.

How to Add a Background Image in Tailwind CSS

The quickest way to add a background image in Tailwind is by using the bg-[url('')] class, introduced in Tailwind CSS v3+.

<div class="bg-[url('/images/hero.jpg')] bg-cover bg-center h-64 w-full">
  <!-- Your content here -->
</div>

Preview

✅ Breakdown:

• bg-[url('/images/hero.jpg')]: Adds your image.

• bg-cover: Makes the image cover the entire element.

• bg-center: Centers the image within the container.

• h-64 w-full: Sets the height and full width.

Tailwind Background Image with Gradient

Tailwind makes it super easy to create gradient backgrounds using built-in utilities. These gradient backgrounds can serve as visual backgrounds on their own or be layered with opacity and images.

<div class="bg-gradient-to-r from-blue-500 to-purple-500">
  This element has a gradient background image.
</div>

Preview

Predefined Tailwind Background Image Classes

Tailwind CSS offers a set of predefined background image classes that you can use out of the box. Some of the commonly used ones include:

• bg-fixed: Sets the background image as fixed, preventing it from scrolling with the rest of the content.

• bg-cover: Scales the background image proportionally to cover the entire element, cropping any excess.

• bg-contain: Scales the background image proportionally to fit within the element, preserving its aspect ratio.

• bg-repeat: Repeats the background image both vertically and horizontally to fill the element.

You can combine these classes with color classes or custom CSS to create unique background image effects.

Custom Tailwind Background Images

Tailwind CSS allows you to define your own custom background images using the bg-{name} utility class. This feature is particularly useful when you want to use specific images in your project.

<div class="bg-custom-image">This element has a custom background image.</div>

In the above example, the bg-custom-image class is applied to the <div> element, which corresponds to a custom background image defined in the Tailwind CSS configuration file.

Responsive Tailwind Background Image

Tailwind CSS enables you to apply background images responsively at different breakpoints. To use responsive tailwind background image classes, you can append the breakpoint prefix to the background image class. For example, md:bg-cover applies the bg-cover background image starting from the medium breakpoint and above.

<div class="bg-cover md:bg-contain">
  This element has a cover background image by default, but switches to contain
  starting from the medium breakpoint.
</div>

Preview

In the above example, the bg-cover class is applied by default, setting the background image to cover the element. However, starting from the medium breakpoint and above (md:bg-contain), the background image changes to be contained within the element.

Tailwind Background Image Classes table

🎓 What’s Next?

Now that you understand how to use Tailwind CSS background image, explore related utilities like:

• Tailwind background origin

• Tailwind Background Color

• Tailwind background Position

Windframe Tailwind blocks

Timeline