How to set Background Image with opacity in Tailwind CSS?

Last Updated : 10 Sep, 2024

Tailwind CSS is a utility-first approach to stylesheets that utilizes customized utility classes for styling. Although Tailwind officially supports setting the background image, there is no built-in class to directly set the background image’s opacity while keeping the opacity of the overlay content.

Opacity applied in CSS works on elements and within the contained contents including the background. However, if you want to set the opaque color only to the background image so that one can read the text or see other objects on the Web page, you have to divide the background and content.

Approach

In this approach, we have used the bg-[url('')] utility to add a background image.
The div element as a container with the relative position will allow placing the background image and the content ‘above’ it independently.
Use an absolute positioned div as a pseudo-element to take care of the background image opacity removing the effect from the content.
The absolute inset-0 class is absolute because it has no relation to the original element’s size, position, and origin, and it sets the container width to the h-screen to have the background image spread to the full width and height of the screen. The bg-[url(‘’)] is used to apply the background image and the setting opacity-70 makes the background semi-transparent. The z-0 class puts this background underneath the content.
The content div uses relative positioning with a z-index of 10 so as to appear above the background. The content consists of a heading, written in the Tailwind utility, and a paragraph containing text also in the Tailwind utility. The flex items-center justify-center h-full classes are used in the same way that their names suggest in order to center the content vertically and horizontally in the container.

Example: This example shows the implementation of the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Background Image with Opacity in Tailwind CSS</title>
    <script src=
"https://cdn.tailwindcss.com"></script>
</head>

<body>

    <div class="relative h-screen">
        <!-- Background Image with Opacity -->
        <div class="absolute inset-0 
            bg-[url(
'https://media.geeksforgeeks.org/wp-content/uploads/20240905154658/gfglogo.jpg')]
             bg-cover bg-center opacity-70 z-0">
        </div>

        <!-- Content -->
        <div class="relative z-10 text-white flex 
        items-center justify-center h-full">
            <div>
                <h1 class="text-4xl text-slate-800 
                font-bold">Hello, Tailwind CSS!
                </h1>
                <p class="text-lg mt-4 text-slate-800">This is an
                    example of a background image with opacity
                </p>
            </div>
        </div>
    </div>

</body>

</html>

Output:

Customizing Opacity and Content

If you wish to set the background image to a different degree of transparency than a 50% opacity, you can do this by substituting ‘opacity-70’ with any other number ranging from 0 (completely transparent) through to 100% opaque for instance opacity-25, opacity-75 and so on.

There is also the ability to style the content itself without problems, irrespective of the transparency of the background image. This makes it suitable for occasions whereby the screen behind the text would require to be somewhat blurry or washed out.

Conclusion

To set a background image with opacity in Tailwind CSS, a layered structure must be utilized by utilizing utility classes. Hiding the parent while allowing the background image and changing the background’s opacity using an absolutely positioned div and Tailwind’s opacity utility allows you to overlay background opacity while the content remains completely clear. This technique is very effective when you want to have a combination between classic backgrounds and simple text without complicating the latter with combined patterns.

How to Add Background Image Overlay in Tailwind CSS?

gmoksi039

Improve

Article Tags :

How to set Background Image with opacity in Tailwind CSS?

Approach

Customizing Opacity and Content

Conclusion

Similar Reads

Thank You!

What kind of Experience do you want to share?