How to Change a CSS Background Image’s Opacity

Technical writer

CSS

07.10.2024

Reading time: 7 min

In web design, achieving the desired visual effect often involves manipulating CSS properties. One common requirement is adjusting the opacity of a background image. Whether you’re a seasoned developer or just starting your design journey, mastering background opacity will empower you to craft stunning visuals that not only look great but also resonate with your audience.

This article provides a comprehensive guide on how to achieve this, including various methods and best practices.

Introduction to CSS Backgrounds

CSS backgrounds are fundamental for creating visually appealing web pages. They can enhance the aesthetics of a website by adding images, colors, and patterns.

Key Components

Background Color: You can pick any color to fill the background of an element (like a box or a whole page). For example, if you want a bright blue background, you’d use:

background-color: blue;

Background Image: Instead of just a plain color, you can use a picture as your background. This is like putting up a poster or a mural. You specify the image you want to use:

background-image: url('your-image.jpg');

Background Size: This controls how the background image fits. You can make it cover the entire space or repeat like a pattern. For example:

background-size: cover; /* Makes the image fill the entire space */

Background Position: This determines where the background image sits. You can center it, move it to the top, or place it wherever you like:

background-position: center;

Background Opacity: This controls how transparent or solid your background is. It’s like adjusting the brightness of a lamp. We’ll talk more on this in the next section.

Understanding CSS Opacity

Opacity is a CSS property that controls the transparency of an element. It can take a value between 0 (completely transparent) and 1 (completely opaque). When applied, this property affects both the element and its contents.

Opacity refers to the transparency level of an element. It is defined using a value between 0 and 1:

0 means fully transparent (invisible).
1 means fully opaque (completely solid).
Values between 0 and 1 create varying degrees of transparency.

For example:

.canvas {
	opacity: 0.2; /* 20% transparent */
}

This can be useful for layering elements or softening backgrounds without completely obscuring them.

Applying Opacity to an Entire Element

The simplest way to change the opacity of a background image is by applying the opacity property directly to the element containing the background.

Be warned! It’s a naive approach. It’s quite limiting.

Here’s how:

<div class="container">
  <h1>Mastering CSS Opacity</h1>
  <p>This text will also have reduced opacity.</p>
</div>

<style>
.container {
  background-image: url('https://images.unsplash.com/photo-1470252649378-9c29740c9fa8?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');

  /* Set the background size and position */
  background-size: cover;
  background-position: center;

  /* Set the opacity of the entire element, including the background image */
  opacity: 0.6;

  /* Set the padding to create some space around the text */
  padding: 20px;

 
  width: 500px;
  height: 300px;
}

.container h1 {
  color: white;
  font-size: 36px;
}

.container p {
  color: white;
  font-size: 18px;
}

</style>

This method will set the opacity for the entire element, including any text or content within it. This can be problematic if you want text to remain fully opaque.

Use an img element

This method allows you to achieve a layered effect while maintaining control over the image transparency.

In this example, we will include a separate <img> tag inside a container.

<div class="image-container">
	<img src="https://images.unsplash.com/photo-1554322662-f8dc2222f79f?q=80&w=1574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Descriptive Text" class="background-image">
	<div class="content">
    	  <h1>Make Waves and Ride the Tide</h1>
    	  <p>Escape to the Endless Horizon.</p>
	</div>
</div>

<style>
	.image-container {
	  position: relative;
	  width: 100%;
	  height: 400px; /* Adjust height as needed */
	  overflow: hidden; /* Ensures no overflow */
	}

	.background-image {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  object-fit: cover; /* Ensures the image covers the entire container */
	  opacity: 0.7; /* Adjust the opacity here */
	}

	.content {
	  position: relative; /* Keeps content above the image */
	  z-index: 1; /* Ensures this content is on top */
	  color: blue; 
	  text-align: center; 
	  padding: 20px;
	}

</style>

As you can see, the image opacity is 70% but the text is fully opaque. Interestingly, this approach overcomes the limitation of first method.

Set Background Opacity with Pseudo-elements

CSS pseudo-elements enable you to insert content before or after an element's actual content, providing a way to enhance your design with additional visual elements or text.

How It Works

Layering Backgrounds: By using ::before or ::after, you can create an additional layer behind your main content. This layer can be styled with a background color or image and adjusted for opacity, providing a visually appealing backdrop.

Content Insertion: The content property allows you to insert text or other elements dynamically, enhancing the design while ensuring that the main content remains unaffected.

<div class="hero">
	<h1>How to adjust css background image opacity</h1>
</div>


<style>
    
.hero {
	position: relative; /* Establishes a positioning context */
	text-align: center;
	color: black;
      Height: 50vh;
}

.hero::before {
	content: ""; /* Required for pseudo-elements */
	position: absolute; /* Positions the background layer */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url('https://images.unsplash.com/photo-1705668403533-3c17914a497a?q=80&w=1506&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
	background-size: cover; /* Ensure the image covers the area */
	opacity: 0.5; /* Adjusts the opacity of background css */
	z-index: 0; /* Places it behind the content */
}

.hero h1 {
	position: relative; 
	z-index: 1; /* Text appears on top */
	padding: 20px;
}
</style>

That’s the benefit you can get using pseudo-elements. You can achieve complex designs without adding extra divs or elements to your HTML, keeping your markup minimal and organized.

Explanation

Positioning: The .hero class is set to relative, which creates a positioning context for the pseudo-element. The ::before pseudo-element is absolutely positioned to cover the entire .hero container.

Background Layer: The ::before pseudo-element contains a background image with adjusted opacity. This creates a semi-transparent effect, allowing the background image to be visible but softened.

Text Visibility: The heading (h1) is given a higher z-index to ensure it appears above the semi-transparent background, making it easy to read.

Best Practices

When working with CSS background opacity, keep the following best practices in mind:

Utilize ::before and ::after pseudo-elements.
Avoid using opacity on elements with text or other content, as it can affect readability.
If you’re working with solid colors, consider using RGBA (Red, Green, Blue, Alpha) values for transparency. This allows for fine-tuned control over color and opacity without affecting other properties.

background-color: rgba(255, 0, 0, 0.5); /* Red with 50% opacity */

Use viewport units (like vh or vw) to make backgrounds responsive. This ensures that backgrounds scale appropriately on different screen sizes.
Test your design in different browsers and devices to ensure com

Final Thoughts

Incorporating CSS background opacity effectively can transform your design, making it not only visually appealing but also functional. By leveraging transparency, you can create a polished and professional look that enhances user experience and engagement.

CSS