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.
Add comment