How to Adjust the Opacity of CSS Background Images

Using partially transparent background images is a popular technique in web design. It can add depth, prevent busy backgrounds, and improve text readability. But CSS doesn't allow directly controlling background image opacity. This article will demonstrate two clever CSS solutions for adjusting the transparency of background images.

Typical Use Cases

Adjusting background image opacity is commonly used in these situations:

• Softening overly bright or distracting photos
• Letting text stand out when placed over images
• Creating effects like full-page hero images with translucent overlays
• Building complex multilayered background designs
• Changing image styles on hover

Understanding typical use cases will help inform when and how to implement these techniques.

Prerequisite Knowledge

This tutorial assumes you have intermediate CSS skills and familiarity with:

• The opacity property and values between 0 and 1
• CSS background properties like background-image, background-position, background-repeat, and background-size
• Two CSS background images can be applied to a single element
• The ::before and ::after pseudo-elements in CSS
• position, z-index, and stacking order

With these core concepts down, you'll be prepared to work through the methods below.

Method 1: Using Multiple Background Layers

One approach is to use multiple background images on a single element.

The first background image is applied at a reduced opacity. The second image repeats and fills in the transparent parts from the first image.

Here is an example:

‍

‍

This allows the opacity property to apply only to the first image layer. The second image layer is unaffected and shows through the transparency.

Pros:

• Fine control over image position and size
• Supported in all major browsers

Cons:

• Requires duplicating background properties
• Can be tricky with complex background images

Let's look at a few more examples with different background-position values:

‍

With some creativity, this technique can accommodate a variety of designs.

Method 2: Using a Pseudo-Element

Another option is to apply the background image to a pseudo-element that sits behind the main content.

For example:

‍

Here the .intro element is given a ::before pseudo-element that fills the parent's dimensions and gets a semi-transparent background image applied to it.

Because this pseudo-element is stacked behind the regular content, the opacity only affects the background image.

Benefits include:

• Full control over background image properties
• Works on most modern browsers

Drawbacks:

• Uses up one of the two ::before/::after pseudo-elements
• Need to manage z-index and layering carefully

This technique can adapt to different layouts and visual styles.

Browser Compatibility

Both methods work reliably on all modern browsers including Chrome, Firefox, Safari, Edge, and Opera.

For older IE browsers, pseudo-elements have partial support back to IE8 and multiple backgrounds to IE9. Using a polyfill can help increase browser coverage.

More Background Image Opacity Techniques

There are a few more advanced tactics as well:

• SVG images with opacity set on the <image> element
• Semi-transparent gradient overlays
• Applying filters like backdrop-filter where supported

See the resources section for guides exploring these additional techniques.

Key Takeaways

• Use multiple backgrounds or pseudo-elements to work around the lack of background image opacity in CSS.
• Understand the limitations and benefits of each approach.
• For wide browser coverage, aim for IE9+ support.
• More advanced techniques are available but may lack browser support.

Resources

• MDN Web Docs on CSS opacity
• CSS-Tricks guide to background image opacity

Adjusting the opacity of background images while maintaining their size and placement takes some careful CSS techniques. But the end result can add depth, polish, and visual flair to a website design.

‍