CSS Gradient Over a Background Image

How to add a CSS gradient on top of a background image using a single div.

How to add a CSS gradient overlay on top of your background without using additional HTML elements.

This is what it looks like before we apply a CSS gradient.

css 
.your-background {
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.90) 100%), 
                url(/path/to/your/image.jpg);
}
html 
<div class="your-background" style='min-height: 40vh; color: #fff;'>
    Your gradient overlayed image
</div>

And here's what it looks like afterwards with the CSS gradient overlay.