Adding a color overlay onto a background image can create a very nice effect. Traditionally, web designers added the overlay offline — using Photoshop or GIMP — and then uploaded the image with an overlay to the website. However, with CSS, you can add a color overlay to a background image with a few simple steps.

There are a number of ways to accomplish a color overlay on a background image using CSS. I’m going to show you how to add a linear gradient overlay to just the background image. You could get a similar result using multiple divs, but this method targets the background image specifically & separately from the div.

Let’s take a look at this example div below:

Two roads diverged in a wood, and I—
I took the one less traveled by,
And that has made all the difference.

As you can see, I’ve added a linear gradient overlay that goes from a light blue shade to light yellow. When you hover over the div, the gradient flips & transitions from yellow to blue. This effect adds a little pop to any image.

.bg-img {background-image: linear-gradient(to bottom, rgba(16, 153, 255, 0.7), rgba(255, 252, 179, 0.7)), url("http://csocially.com/wp-content/uploads/2015/12/2-roads.jpg");
    background-image: -moz-linear-gradient(top, rgba(16, 153, 255, 0.7), rgba(255, 252, 179, 0.7)), url("http://csocially.com/wp-content/uploads/2015/12/2-roads.jpg");
    background-image: -o-linear-gradient(top, rgba(16, 153, 255, 0.7), rgba(255, 252, 179, 0.7)), url("http://csocially.com/wp-content/uploads/2015/12/2-roads.jpg");
    background-image: -ms-linear-gradient(top, rgba(16, 153, 255, 0.7), rgba(255, 252, 179, 0.7)), url("http://csocially.com/wp-content/uploads/2015/12/2-roads.jpg");
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(16, 153, 255, 0.7)), to(rgba(255, 252, 179, 0.7))), url("http://csocially.com/wp-content/uploads/2015/12/2-roads.jpg");
    background-image: -webkit-linear-gradient(top, rgba(16, 153, 255, 0.7), rgba(255, 252, 179, 0.7)), url("http://csocially.com/wp-content/uploads/2015/12/2-roads.jpg");
    width:640px; height:383px;
    color:#fff;
    font-size:3em;
    padding:1em;
    line-height:1;
    text-shadow:.5px .5px #000;
  }
.bg-img:hover {background-image: linear-gradient(to bottom, rgba(255, 252, 179, 0.7), rgba(16, 153, 255, 0.7)), url("http://csocially.com/wp-content/uploads/2015/12/2-roads.jpg");
    background-image: -moz-linear-gradient(top, rgba(255, 252, 179, 0.7), rgba(16, 153, 255, 0.7)), url("http://csocially.com/wp-content/uploads/2015/12/2-roads.jpg");
    background-image: -o-linear-gradient(top, rgba(255, 252, 179, 0.7), rgba(16, 153, 255, 0.7)), url("http://csocially.com/wp-content/uploads/2015/12/2-roads.jpg");
    background-image: -ms-linear-gradient(top, rgba(255, 252, 179, 0.7), rgba(16, 153, 255, 0.7)), url("http://csocially.com/wp-content/uploads/2015/12/2-roads.jpg");
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 252, 179, 0.7)), to(rgba(16, 153, 255, 0.7))), url("http://csocially.com/wp-content/uploads/2015/12/2-roads.jpg");
    background-image: -webkit-linear-gradient(top, rgba(255, 252, 179, 0.7), rgba(16, 153, 255, 0.7)), url("http://csocially.com/wp-content/uploads/2015/12/2-roads.jpg");
}

To use this code on your own site, just add div with the class bg-img or change the class in the above CSS to reflect your own.

Happy coding!

Do you prefer another method? Let me know in the comments below.
Are you looking for other overlay effects or want a tutorial on something else? Leave a comment or send me a message.