Best way to add a image overlay?

HTML & CSS
1

Suppose I have the code below, and I wanted to add an overlay to .image-hero. I just need a standard semi transaprent overlay (so the text shows up better) Assume I have access to the markup, and I can add more html elements if I need to.

<div class="image-hero" style="background-image: url("backgroundimage.com")">

<h1> Some Title </h1>
<p> Some excerpt </p>


</div>
2

You could add a linear gradient to the background image as you can specify multiple backgrounds fo one element now. Just make sure the linear gradient is first as it will then stack on the top of the other background image.

e.g.

Specifically:

background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)), url(https://picsum.photos/2000/1200) no-repeat 50% 0;

Adjust the last zero in the rgba value to adjust the opacity between zero (fully transparent) and one (fully opaque).

You could also just add a semi transparent background to the text only if you wanted.

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.