Home How to set a section image background with a set opacity without affecting section content

Questions

How to set a section image background with a set opacity without affecting section content

byMR

May 5, 2023

How to set a section image background with a set opacity without affecting section content?

I am trying to set the bg of an html section to an image, but with 50% opacity so you can still see the content.

Here is an example of what i tried however it just made the section content have 50% opacity too.

I also tried editing the png itself and making it 50% transparent but this changed nothing.

.welcome-bg {
  background-image: url('https://i.ibb.co/YcX5sSX/output-onlinepngtools.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  opacity: 50%;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

<script src="https://cdn.tailwindcss.com"></script>

<section id="introduction" class="bg-white text-gray-900 py-20 border-b border-gray-300 relative">
  <div class="container mx-auto px-4">
    <div class="welcome-bg"></div>
    <div class="welcome-content">
      <h1 class="text-4xl font-bold mb-6">Welcome to AI Universal</h1>
      <p class="text-lg mb-8">AI Universal is an AI-based business that aims to provide easy-to-use and accessible AI technology to users around the world. Our mission is to remove the confusion around AI and allow everyone to use it for good. We provide users with a platform
        for tutoring, learning, homework, and more, making AI technology accessible to a wide audience.</p>
      <button class="bg-gradient-to-r from-blue-500 to-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" onclick="location.href='/signup'">Get Started</button>
      <button class="bg-gradient-to-r from-blue-500 to-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" onclick="location.href='/learn-more'">Learn More</button>
    </div>
  </div>
</section>

>Solution :

What you seem to be experiencing is that the image is displaying over the top of the content. Consider moving the .welcome-content up the z stack and over the .welcome-bg element by adding relative z-10 classes to the .welcome-content element:

.welcome-bg {
  background-image: url('https://i.ibb.co/YcX5sSX/output-onlinepngtools.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  opacity: 50%;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<script src="https://cdn.tailwindcss.com"></script>

<section id="introduction" class="bg-white text-gray-900 py-20 border-b border-gray-300 relative">
  <div class="container mx-auto px-4">
    <div class="welcome-bg"></div>
    <div class="welcome-content relative z-10">
      <h1 class="text-4xl font-bold mb-6">Welcome to AI Universal</h1>
      <p class="text-lg mb-8">AI Universal is an AI-based business that aims to provide easy-to-use and accessible AI technology to users around the world. Our mission is to remove the confusion around AI and allow everyone to use it for good. We provide users with a platform
        for tutoring, learning, homework, and more, making AI technology accessible to a wide audience.</p>
      <button class="bg-gradient-to-r from-blue-500 to-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" onclick="location.href='/signup'">Get Started</button>
      <button class="bg-gradient-to-r from-blue-500 to-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" onclick="location.href='/learn-more'">Learn More</button>
    </div>
  </div>
</section>