Overlay Header Image — Only CSS
The header with an overlay. This element has been a staple of websites going back to the early 2000s. It’s a header image, with or without header text, with some sort of colored overlay that matches the sites branding. See the above image for an example.
Most sites that I’ve seen use a separate div as an overlay to create this effect, positioning a semi-transparent div on top of their header image like so:
While this is a tried-and true method, it breaks the separation of concerns rules that I try to follow, namely a lot of the presentation details of this site component is now in my HTML. This is also more error prone, an incorrect assignment to the positioning of this overlay could cause presentation to break for the user.
But there is a better way — using the box-shadow inset property we can cause the color of the shadow to turn inward, creating the same effect as the more complicated code above. we can replace all of the above CSS, as well as the overlay…
