Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • Tailwind CSS Tutorial
  • Tailwind Interview Questions
  • Tailwind Layout
  • Tailwind Flexbox
  • Tailwind Grid
  • Tailwind Alignment
  • Tailwind Spacing
  • Tailwind Sizing
  • Tailwind Typography
  • Tailwind Backgrounds
  • Tailwind Borders
  • Tailwind Effects
  • Tailwind Filters
  • Tailwind Tables
  • Tailwind Transitions and Animation
  • Tailwind Transforms
  • Tailwind Interactivity
  • CSS Frameworks
  • Web Technology
Open In App
Next Article:
How to Add Background Image Overlay in Tailwind CSS?
Next article icon

How to set Background Image with opacity in Tailwind CSS?

Last Updated : 10 Sep, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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:

opacity-min
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.


Next Article
How to Add Background Image Overlay in Tailwind CSS?

G
gmoksi039
Improve
Article Tags :
  • Web Technologies
  • Tailwind CSS

Similar Reads

  • CSS - How To Set Opacity Of Background Image?
    Here are the different ways to set the opacity of the background image 1. Using Opacity PropertyThe 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 t
    1 min read
  • 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
    2 min read
  • How To Show Background Image In Tailwind CSS Using React Dynamic Url?
    Tailwind CSS is a utility-first framework that uses preset classes to greatly speed up styling. However, utility classes are insufficient when handling dynamic content such as background graphics. We'll demonstrate how to use Tailwind CSS for layout and styling in a React component while managing dy
    3 min read
  • 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
    3 min read
  • How to set a Background Image With React Inline Styles ?
    Setting a background image with React inline style is a straightforward method of using the images as background to enhance the UI of the wen application. How to Set Background Image in React ?To set background image with react inline styles we will be using the style attribute. This style attribute
    2 min read
  • How to apply background image with linear gradient using Tailwind CSS ?
    In this article, we will see how to apply background images with a linear gradient using Tailwind CSS. Tailwind CSS is a highly customizable, utility-first CSS framework from which we can use utility classes to build any design. To apply background images with linear gradients we use the background
    2 min read
  • 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
    4 min read
  • How to Add a Clip Path to Image in Tailwind CSS ?
    Web application designers can create creative and eye-catching designs with Tailwind CSS's flexibility in applying clip paths to images. Developers can create complex shapes by using clip paths, which define an element's visible region. Custom Clip Paths using TailwindTailwind CSS's custom clip path
    2 min read
  • Tailwind CSS Background Opacity
    This class accepts lots of value in tailwind CSS in which all the properties are covered in class form. The bg-opacity is the class of an element that describes the transparency of the element. It is the alternative to the CSS Opacity / Transparency. Background Opacity class: background-opacity-0: C
    2 min read
  • How to Set Background Color Opacity without Affecting Text in CSS?
    Here are two approaches to set a background color with opacity in CSS without affecting the text. 1. Using RGBA color valuesTo set the opacity only to the background color and not the text inside it we can use RGBA color values instead of the opacity property. Because using the opacity property can
    2 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences