How to set Background Image with opacity in Tailwind CSS?

CSS - How To Set Opacity Of Background Image?

Last Updated : 04 Jan, 2025

Here are the different ways to set the opacity of the background image

1. Using Opacity Property

The opacity property in CSS is a simple way to adjust the transparency of an element. You can set its value between 0 (completely transparent) and 1 (fully opaque).

Syntax

div {
  opacity: 0.5; /* Adjusts transparency for the entire element */
}

HTML

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .element {
            width: 300px;
            height: 200px;
            background-image: url('https://media.geeksforgeeks.org/wp-content/uploads/20210313130410/exbg.png');
            opacity: 0.3;
            color: white;
            text-align: center;
            line-height: 200px;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <h2 style="color: green;"> GeeksForGeeks</h2>
    <div class="element">
        Background Image with Opacity
    </div>
</body>
</html>
<!--Driver Code Ends-->

Output

OpacityofBackgroundImage — Using Opacity Property

2. Using Pseudo-elements

To make a background image transparent without affecting the element’s content, you can use pseudo-elements like ::before or ::after and apply the opacity property to them.

Syntax

selector::pseudo-element {
    property: value;
}

HTML

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .element {
            width: 300px;
            height: 200px;
            background-image: url('https://media.geeksforgeeks.org/wp-content/uploads/20210313130410/exbg.png');
            opacity: 0.3;
            color: white;
            text-align: center;
            line-height: 200px;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <h2 style="color: green;"> GeeksForGeeks</h2>
    <div class="element">
        Background Image with Opacity
    </div>
</body>
</html>
<!--Driver Code Ends-->

Output:

ImageOpacity — Using Pseudo-elements

How to set Background Image with opacity in Tailwind CSS?

devangj9689

Improve

Article Tags :

Similar Reads

How to Set Background Image in CSS?

CSS (Cascading Style Sheets) can allow developers to set the background image for the web pages or specific HTML elements. This feature can help enhance the visual aesthetics of the website. The background-image property in CSS can be used to specific one or multiple background images to be applied

How to set Background Image with opacity in Tailwind CSS?

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

How to Set Background Images in ReactJS

Setting the background images in React improves the UI and user experience of web apps by making the appearance better. These images can be some shape or shade using color gradients. In this tutorial, we will look at different methods to apply background images to your react application. How to Set

How to Add Background Image in CSS?

The CSS background-image property is used to add an image as a background to an element.Syntaxbackground-image: url()1. Setting background Image of an ElementA background image is added to an h1 tag using the URL.HTML<h1 style="background-image: url( 'https://media.geeksforgeeks.org/wp-content/up

How to Set Offset of Background Image from Right using CSS ?

In this article, you can see the ways by which you can set the offset of a background image from the right using CSS. The approach solving involves the use of the CSS background positioning property of background-position. This property is essentially used to specify the space from which the backgro

How to Specify a Fixed Background Image in CSS?

We will explore how to specify a fixed background image using the background-attachment property in CSS. This property is used to control the behavior of a background image as the user scrolls through a web page. By using the background-attachment property, you can make a background image fixed, scr

How to Remove Background from image in CSS?

In modern web design, over 85% of websites use background manipulation to enhance visual appeal and layering. CSS offers several ways to remove or hide image backgrounds, such as using transparency, clipping, or masking techniques. This article will cover the most effective and up-to-date methods to

How to set multiple background images using CSS?

The multiple background images for an element can be put in the HTML page using CSS. Use CSS background property to add multiple background images for an element in any pattern and use other CSS property to set the height and width of the images. The used background property are listed below: backgr

How to Set background Image using jQuery css() Method ?

This article will show you how to set the background image using jQuery. To set the background image, we are using the jQuery css() method. jQuery css() MethodThis method sets/returns one or more style properties for the specified elements. Syntax: Return a CSS property:$(selector).css("propertyname

How to Add Background Image Overlay in Tailwind CSS?

Adding a background overlay to your Tailwind CSS project can help you create visually appealing layouts that layer content over the background image. In this article, we'll demonstrate how to add a background overlay using the Tailwind CSS utility class.ApproachWe will use Tailwind CSS to create a s