3 ways to: apply an overlay

An overlay upon a background image always been a common technique for designers to highlight an image or place a text upon it. So let's assume that we don't want to create this effect with a design software like photoshop but with the power of pure CSS.

I'm going to saw you 3 simple ways to apply this effect:

• 1: With pseudo element
• 2: With Multiple backgrounds & gradient
• 3: With Blend mode

With pseudo element

This is a common way to apply an overlay upon a background image. You'll need to create a div with some basic styles for the background image. Then to complete our effect we just need to create a pseudo element with an rgba background and strech it through each side.

So the styles will be the following:

          
            div {
              background: url(‘image.jpg’) no-repeat;
              width: 200px;
              height: 200px;
              position: relative;

              &:before {
                content: ‘’;
                background: rgba(0, 0, 0, .4);
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
              }
            }
          
        

With multiple backgrounds & gradient

We could also use the power of multiple background to apply this effect. A though could be to apply a rgba background color with the background image in one background declaration.

          
            div {
              background: rgba(0, 0, 0, .4),
                                  url(‘image.jpg);
              width: 200px;
              height: 200px;
            }
          
        

The above styles so are invalid since we can't use neat background colors at multiple background property so we need to find an alternative way. Gradient is coming to the rescue! We can fake an rgba background color with the usage of gradient.

So the style will be the following:

          
            div {
              background: linear-gradient(
                                   rgba(0, 0, 0, .4),
                                   rgba(0, 0, 0, .4)
                                 ),
                                 url(‘image.jpg);
              width: 200px;
              height: 200px;
            }
          
        

The main images at the left side are actually using this technique.

With blend mode

With CSS blend mode now we can blend a background image with a background color simple as the following code.

          
            div {
              background-image: url(‘image.jpg’);
              background-color: rgba(0, 0, 0, .4);
              background-blend-mode: multiply;
              width: 200px;
              height: 200px;
            }
          
        

Background-blend-mode does all the work for us by multipling and combining the two background properties. You could use any of the other background-blend-mode options (overlay, darken and many more) to accomplish the needed effect.

You can see all of the above solutions in action in the following pen, enjoy!

Tweet