Tutorial

How to Change a CSS Background Image’s Opacity

Updated on December 15, 2021
authorauthorauthor

Nicholas Cerminara, Andy Hattemer, and Andy Hattemer

English
How to Change a 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.

In this article, you will be presented with two methods to work around this limitation for background images with opacity.

Deploy your frontend applications from GitHub using DigitalOcean App Platform. Let DigitalOcean focus on scaling your app.

Prerequisites

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

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:

Hello World!

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:

Hello World!

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.

If you’d like to learn more about CSS, check out our CSS topic page for exercises and programming projects.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products


About the authors
Default avatar
Nicholas Cerminara

author


Default avatar

Community Builder

Then: Learned to build the internet on DigitalOcean Community. Now: Building DigitalOcean Community on the internet.


Default avatar

Community Builder

Then: Learned to build the internet on DigitalOcean Community. Now: Building DigitalOcean Community on the internet.


Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
1 Comments


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Hi, this was really helpful but I have one question. What is the use of the “content:’ '” line in the pseudoelement?

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel