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.
Adjusting background image opacity is commonly used in these situations:
Understanding typical use cases will help inform when and how to implement these techniques.
This tutorial assumes you have intermediate CSS skills and familiarity with:
With these core concepts down, you'll be prepared to work through the methods below.
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.
Let's look at a few more examples with different background-position values:
With some creativity, this technique can accommodate a variety of designs.
Another option is to apply the background image to a pseudo-element that sits behind the main content.
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.
This technique can adapt to different layouts and visual styles.
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.
There are a few more advanced tactics as well:
See the resources section for guides exploring these additional techniques.
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.