How to Adjust Background Image Opacity in CSS

opacity is a CSS property that allows you to change the opacity 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 a 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 that require transparency. These methods will help you achieve the desired transparency effect on background images without compromising the visibility of the content within the element.

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.

The first approach relies on 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 accommodate 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.

The second approach relies on 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, you can also provide an empty string and use the pseudo-elements for design purposes.

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.

When designing web pages, it’s essential to ensure that text remains readable over background images. Overlays can be used to improve readability by adding a semi-transparent layer between the background image and the text. This technique is particularly useful for hero sections, banners, and other areas where text needs to stand out against a visually appealing background.

.example {
  position: relative;
}

.example::before {
  content: '';
  position: absolute;
  inset: 0; /* Equivalent to top: 0; right: 0; bottom: 0; left: 0; */
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 0;
}

.example > * {
  position: relative;
  z-index: 1;
}

Hover effects can significantly enhance the user experience by providing visual cues and feedback. One common hover effect is changing the opacity of UI elements, such as buttons or icons, to indicate interactivity. By dynamically adjusting opacity on hover, designers can create a sense of depth and visual interest, making the user interface more engaging and responsive.

/* Example of dynamically adjusting opacity for hover effect */
.example-button {
  opacity: 0.8; /* Initial opacity */
}

.example-button:hover {
  opacity: 1; /* Full opacity on hover */
}

Hero sections and banners are critical components of modern web design, often serving as the first point of contact between the user and the website. Applying transparent backgrounds to these elements can create a sense of continuity and visual flow, allowing the background image to seamlessly integrate with the rest of the layout. This design approach can be particularly effective in creating a modern, sleek look that draws the user’s attention to the content.

/* Example of utilizing transparent backgrounds for hero sections and banners */
.hero-section {
  position: relative;
  background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white color */
  background-image: url('hero-image.jpg');
  background-blend-mode: multiply;
}

When adjusting background image opacity in CSS, it is easy to run into issues that are confusing at first. Most of these problems come from how CSS handles layering and transparency. This section walks through the most common mistakes and explains how to fix them with simple, reliable patterns.

Background Image Opacity Also Affects Text

One of the most common issues is seeing the text fade along with the background image. This usually happens when the opacity property is applied directly to the container element.

This behavior is expected. The opacity property affects the entire element, including all of its children. CSS does not offer a way to apply opacity only to the background-image of an element.

To avoid this behavior, the background image needs to live on its own layer. A pseudo-element works well for this because it lets you control opacity without touching the content.

.container {
  position: relative;
}

.container::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('image.jpg');
  background-size: cover;
  opacity: 0.5;
}

.container > * {
  position: relative;
}

With this setup, the background image becomes transparent while the text stays fully readable.

Pseudo-Element Background Does Not Appear

Sometimes the background image simply does not show up when using ::before or ::after. When this happens, the issue is almost always a missing required CSS property.

A pseudo-element will not render unless the content property is defined, even if it is an empty string. The parent element also needs position: relative, and the pseudo-element must have a defined width and height. Double-checking these details usually fixes the problem.

.wrapper {
  position: relative;
}

.wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('image.jpg');
  opacity: 0.6;
}

Once all required properties are in place, the background should render as expected.

Background Image Covers or Blocks Content

Another issue you may encounter is the background layer covering the text or blocking interaction with links and buttons. This typically means the background layer is sitting above the content in the stacking order.

The fix is to be explicit about how layers stack. The background layer should sit behind the content, and the content should be placed above it using z-index.

.section::before {
  z-index: 0;
}

.section > * {
  position: relative;
  z-index: 1;
}

This keeps the background where it belongs and ensures the content remains usable.

Background Image Does Not Scale as Expected

If the background image looks stretched, cropped, or does not fill the container, the problem is usually related to sizing or positioning.

In most layouts, you want the image to scale with the container. Setting background-size to cover and centering the image solves this in most cases.

.section::before {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

This approach works well across different screen sizes and layouts.

Overlay Makes Text Hard to Read

Overlays are useful for improving text contrast, but they can be overdone. If the overlay feels too dark or too light, the issue is usually the alpha value in the rgba() color.

There is no single correct alpha value. The right opacity depends on how bright or busy the background image is. The best approach is to start with a moderate value and adjust it gradually.

.overlay::before {
  background-color: rgba(0, 0, 0, 0.4);
}

Brighter images often need a slightly stronger overlay, while darker images need less.

Hover Effects Affect the Entire Section

Hover effects can behave strangely if they are applied to a container that includes both the background layer and the content. In those cases, hovering over a button can cause the entire section to fade.

This happens because the hover state is applied to a parent container instead of the interactive element. The solution is to apply hover effects only to the interactive elements themselves.

.button {
  opacity: 0.8;
}

.button:hover {
  opacity: 1;
}

This keeps the background stable and makes interactions predictable.

1. How do I make a background image transparent in CSS?

To make a background image transparent without affecting the text inside, use a CSS pseudo-element (::before or ::after). Applying opacity directly to a container will make everything, including the text, fade out:

1. Set the container to position: relative.
2. Create a ::before element with position: absolute to hold the background layer.
3. Wrap your actual content in a child element and give it position: relative and z-index: 1 so it sits above the background.
4. Apply the background image and opacity to the pseudo-element.

Here’s an example:

.container {
  position: relative;
}

.container__content {
  position: relative;
  z-index: 1; /* Content above the background layer */
}

.container::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: url('image.jpg') no-repeat center/cover;
  opacity: 0.5; /* Control transparency here */
  z-index: 0; /* Background layer */
}

2. Can I change background image opacity without affecting text?

Yes, you can change the background image opacity without affecting the text by using a pseudo-element or a separate element for the background image. Here’s an example using a pseudo-element:

div {
  position: relative;
}

div::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('image.jpg');
  background-size: cover;
  opacity: 0.5; /* Adjust opacity here */
  z-index: -1;
}

3. What’s the difference between opacity and background-blend-mode?

opacity affects the entire element and its content, whereas background-blend-mode only affects the background image or color. opacity sets the level of transparency for the entire element, making it and its content semi-transparent. On the other hand, background-blend-mode blends the background image or color with the background color, allowing for more control over the background’s transparency and appearance.

4. How to make only background opacity in CSS?

To change only the background opacity without affecting text or child elements, you must use a separate background layer, such as a pseudo-element.

div {
  position: relative;
}

div::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('image.jpg');
  background-size: cover;
  opacity: 0.5;
  z-index: -1;
}

This approach allows you to adjust the background image’s opacity independently while keeping the foreground content fully opaque.

5. How do I dull the background image in CSS?

To dull a background image in CSS, you can reduce its visibility using filters such as blur, brightness, or contrast. Blur reduces sharpness, while brightness and contrast reduce intensity.

div {
  position: relative;
}

div::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('image.jpg');
  background-size: cover;
  filter: blur(8px) brightness(0.7) contrast(0.8);
  z-index: -1;
}

This adds a blur effect to the background image, making it appear duller. You can adjust the value of blur to control the level of dullness.

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.
• Learn 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.
• Explore how to add a background image to the top section of your webpage with HTML.
• Dive into CSS gradient borders using pure CSS.

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