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

Question

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>

I think your best bet is to create two nested `
` with a background image. Top one having the `background-image` and `opacity`, bottom one having the content and `margin` the height of the top ones height. But I can imagine this is not ideal and your text may overflow the image on different screen sizes. Perhaps part of this can be solved by giving both the same `height` property. — Al John, May 05 '23 at 19:50

score 1 · Accepted Answer · answered May 05 '23 at 19:49

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>

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

1 Answers1