How to Change CSS background Image Opacity Without Affecting Text

Changing the opacity of a background image is a useful technique for adding depth and style to a website. It can also help you create a subtle and attractive visual effect that will make your website stand out.

In this article, we will explore several ways of changing a CSS background image’s opacity.

Opacity Inheritance: How Parent Opacity Affects Child Elements

One way to change the opacity of a background image is to use the opacity property in CSS. This property is used to set the transparency of an element, including the background image.

<div class="container">
   <h1>Hello, World!</h1>
</div>

In this example, the container div has a background image, and the opacity is set to 0.5. This means that the image will be semi-transparent and the text inside the div will be visible.

<style>
   .container {
      background-image: url('path-to-image.jpg');
      opacity: 0.5;
   }
</style>

Problem: When you apply the opacity property to a container, it also affects the entire element and its child elements equally. This means that the text “Hello, World!” inside the child elements also inherits the same opacity value as the container, which may not be what you want.

Solution: Using a Pseudo-Element to Add a Background Image

To solve the problem, we change the opacity of a background image using pseudo-elements in CSS. Pseudo-elements are elements that are not part of the HTML document but can be used to style certain parts of the document, such as the background.

<div class="container">
   <h1>Hello, World!</h1>
</div>

In this example, the container div has a pseudo-element called ::before that is positioned on top of the container. The ::before element has a background image and an opacity of 0.5, making the background image semi-transparent.

<style>
   .container {
      position: relative;
   }

   .container::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('path-to-image.jpg');
      opacity: 0.5;
   }
</style>

The Alternative Solution of Adding an Overlay

If you want to avoid using the opacity of the background image then you can add an overlay on top of the background image using a pseudo-element or an additional element. The overlay is a solid color with a reduced opacity, which allows the background image to show through, but also adds a tint to the image.

<div class="container">
  <p>Some text inside the container</p>
</div>

In this example, the .container element has a background image, and a pseudo-element (::before) is added on top of the background image using absolute positioning. The pseudo-element has a solid black background color with 50% opacity, which creates the overlay effect.

<style>
.container {
  position: relative;
  background-image: url('your-image-url.jpg');
}

.container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>

Both solutions are good to use and give you control to adjust the opactiy value. However, the overlay solution is more handy if you want to change the toned color of the bcakground color. You can add any overlay background color as you want. Like we can see the background-color to rgba(142, 76, 271, 0.63):

Conclusion

Changing the opacity of a background image can add style and depth to your website. There are several ways to achieve this effect, including using the opacity property, RGBA colors, and pseudo-elements. By experimenting with these techniques, you can create unique and attractive designs for your website.