How To Add Linear Gradient Overlay to Background Image

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:

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!