CSS gradients allow us to display smooth transitions between two or more colours. They can be added on top of the background image by simply combining the background-image URL and gradient properties.
Adding a background image to a div tag is easy using CSS. Here it is;
<body> <div id='banner-bg'>Find your property</div> </body>
We have put some other rules on the div to set the background image to fill the whole div with the background-size: cover. The height is 100vh, so resize your browser to see how this background-size works.
#banner-bg {
background-image: url('img/banner-1.jpg');
height: 100vh;
background-size: cover;
color: white;
}How to Add a Gradient on Top of a Background Image?
If you wanted to add a semi transparent colour gradient that goes on top of the background image, your first thought might be to overlay another div (or use the ::after css selector).
However, the easiest way to do it is to just add another parameter to the background-image css rule.
Take a look!
#banner-bg {
background-image:
linear-gradient(0deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .3)),
url('img/banner-1.jpg');
height: 100vh;
background-size: cover;
color: white;
}Output
See the Pen Combine Background Image With Gradient Overlay by Sunil Pradhan (@Sunil_Pradhan) on CodePen.
