Easy Ways to Adjust CSS Background Image's Opacity

Introduction

opacity is a CSS property that allows you to change the opaqueness of an element. By default, all elements have a value of 1. By changing this value closer to 0, the element will appear more and more transparent.

A common use case is using an image as part of the background. Adjusting the opacity can improve the legibility of text or achieve the desired appearance. However, there is no way to target the background-image of an element with opacity without affecting the child elements.

This limitation can be particularly challenging when designing web pages that require a specific visual hierarchy or readability. For instance, you might want a background image to be less prominent so that text or other content on top of it stands out more clearly. Simply applying the opacity property to the entire element will not suffice, as it will also make the text and other child elements transparent.

In this article, you will learn two methods to work around this limitation for background images with opacity. These methods will help you achieve the desired transparency effect on background images without compromising the visibility of the content within the element.

Prerequisites

If you would like to follow along with this article, you will need:

• Familiarity with opacity.
• Familiarity with position: relative and position: absolute.
• Familiarity with stacking context and z-index
• Familiarity with the :before and :after pseudo-elements.

Method 1 — Using a Separate Image Element and Positioning

The first approach will rely upon two elements. One is a “wrap” that provides a point of reference with position: relative. The second is an img element that appears behind the content with position: absolute and stacking context.

Here is an example of the markup for this approach:

<div class="demo-wrap">
  <img
    class="demo-bg"
    src="https://assets.digitalocean.com/labs/images/community_bg.png"
    alt=""
  >
  <div class="demo-content">
    <h1>Hello World!</h1>
  </div>
</div>

And here are the accompanying styles:

.demo-wrap {
  overflow: hidden;
  position: relative;
}

.demo-bg {
  opacity: 0.6;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}

.demo-content {
  position: relative;
}

This markup and styles will produce a result with text on top of an image:

<style>
.css-bg-example-1 .demo-wrap {
  overflow: hidden;
  position: relative;
}

.css-bg-example-1 .demo-bg {
  opacity: 0.6;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}

.css-bg-example-1 .demo-content {
  position: relative;
}

.css-bg-example-1 .demo-content h1 {
  padding-top: 100px;
  padding-bottom: 100px;
  padding-left: 1em;
  padding-right: 1em;
}
</style>
<div class="css-bg-example-1">
  <div class="demo-wrap">
    <img
      class="demo-bg"
      src="https://assets.digitalocean.com/labs/images/community_bg.png"
      alt=""
    >
    <div class="demo-content">
      <h1>Hello World!</h1>
    </div>
  </div>
</div>

The parent demo-wrap <div> establishes an absolute positioning containing block. The demo-bg <img> is set to position: absolute and assigned a slight opacity. The demo-content <div> is set to position: relative and due to how the markup is arranged it has a higher stacking context than demo-bg. It is also possible to use z-index for finer control over the stacking context.

There are some limitations to this approach. It assumes that your image is large enough to accomodate the size of any element. You may need to enforce size limitations to prevent an image from appearing cut off or not covering the entire height of an element. It will also require additional adjustments if you want to control the “background position” and no clean “background repeat” alternative.

Method 2 — Using CSS Pseudo-Elements

The second approach will rely upon pseudo-elements. The :before and :after pseudo-elements are available to most elements. Typically, you would provide a content value and use it to append extra text at the beginning or end. However, it is also possible to provide an empty string and then you can utilize the pseudo-elements for designs.

Here is an example of the markup for this approach:

<div class="demo-wrap">
  <div class="demo-content">
    <h1>Hello World!</h1>
  </div>
</div>

And here are the accompanying styles:

.demo-wrap {
  position: relative;
}

.demo-wrap:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  background-image: url('https://assets.digitalocean.com/labs/images/community_bg.png');
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
}

.demo-content {
  position: relative;
}

This markup and styles will produce a result with text on top of an image:

<style>
.css-bg-example-2 .demo-wrap {
  position: relative;
}

.css-bg-example-2 .demo-wrap:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  background-image: url('https://assets.digitalocean.com/labs/images/community_bg.png');
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
}

.css-bg-example-2 .demo-content {
  position: relative;
}

.css-bg-example-2 .demo-content h1 {
  padding-top: 100px;
  padding-bottom: 100px;
  padding-left: 1em;
  padding-right: 1em;
}
</style>
<div class="css-bg-example-2">
  <div class="demo-wrap">
    <div class="demo-content">
      <h1>Hello World!</h1>
    </div>
  </div>
</div>

The parent demo-wrap <div> establishes an absolute positioning containing block. The pseudo-element :before is set to position: absolute, assigned a slight opacity, and uses background-size: cover to occupy all the available space.

This approach has the advantage of support for other background properties like background-position, background-repeat, and background-size. This approach has the disadvantage of using one of the pseudo-elements which may conflict with another design effect - like a clearfix solution.

Conclusion

In this article, you learned about two methods to work around this limitation for background images with opacity.

For more in-depth information on CSS, you can use the following tutorials:

• Learn how to apply background styles to HTML elements with CSS in our tutorial.
• Discover how to style figures and image HTML elements with CSS by visiting our tutorial.
• Understand hex code colors and alpha values in CSS by checking out our guide.

Additionally, if you’d like to deep-dive into CSS, check out our learn more about CSS series for exercises and programming projects.

FAQs

How to change opacity on a background image in CSS?

To change the opacity of a background image in CSS, you can use a semi-transparent overlay or manipulate the image itself using CSS properties like background-image with linear-gradient.

div {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
              url('image.jpg');
  background-size: cover;
  background-position: center;
}

Here, rgba(0, 0, 0, 0.5) adds a semi-transparent black overlay on the background image.

To learn more about background editing with CSS, refer to our tutorial on How to apply Background Styles to HTML elements with CSS.

How do I dim the background image in CSS?

To dim a background image, you can combine a semi-transparent overlay with the linear-gradient method, as shown above, or adjust the filter property if you’re targeting the image itself.

div {
  background-image: url('image.jpg');
  background-size: cover;
  filter: brightness(50%);
}

This reduces the brightness of the image, effectively dimming it.

How to put opacity in background color in CSS?

To make a background color semi-transparent, use the rgba (red, green, blue, alpha) color format. The alpha value controls the transparency (0 = fully transparent, 1 = fully opaque).

div {
  background-color: rgba(255, 0, 0, 0.5); /* Red with 50% transparency */
}

This creates a semi-transparent red background. To learn more about color codes in CSS, you can refer to our tutorial on Hex-code colors.

How to make a background image transparent?

You can make a background image appear transparent by using an overlay or the filter property. However, if you want the image itself to have transparency, it must have transparent pixels in its source file (e.g., PNG format).

div {
  background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), 
              url('image.jpg');
  background-size: cover;
}

Refer to this tutorial on How to style and edit images in CSS to learn more.

How to change the CSS background image?

To change the background image in CSS, modify the background-image property.

div {
  background-image: url('new-image.jpg');
}

You can replace new-image.jpg with the path to your desired image file.

What is the opacity effect of background in CSS?

The opacity effect in CSS determines the transparency level of an element. Using the opacity property affects the entire element, including its content.

div {
  opacity: 0.5; /* Makes the entire element 50% transparent */
}

To apply opacity to only the background (and not the content), use an rgba or linear-gradient overlay, as described in previous answers.