Overlay Header Image — Only CSS

This common use case can be handled entirely with 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.