CSS gradient overlay is an easy way to add a semi opaque/semi transparent colour gradient that goes on top of the background image.

Detailed documentation and more examples you can find in our Bootstrap gradient overlay Docs

Basic example

1. Adding a background image to a

(or any other tag) is easy using CSS. Here it is (without gradient yet): 


    <div id='show_bg'>something here</div>

And some style: 


    #show_bg { 
    background-image: url('images/background.jpg'); 
    width: 80%; 
    height: 200px; 
    background-size: cover;
    }
something here

Let's add some gradient now. Simply update our CSS : 


    background-image:
    linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)),
    url('images/background.jpg');
something here