Hello Sunil
combine-background-image-with-gradient-overlay-feature-image

How to Combine Background Image With Gradient Overlay

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.

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Similar articles you may like

Sunil Pradhan

Hi there đź‘‹ I am a front-end developer passionate about cutting-edge, semantic, pixel-perfect design. Writing helps me to understand things better.

Add comment

Stay Updated

Want to be notified when our article is published? Enter your email address below to be the first to know.

Sunil Pradhan

Hi there đź‘‹ I am a front-end developer passionate about cutting-edge, semantic, pixel-perfect design. Writing helps me to understand things better.