You can use a pseudo-element like :before.
First, add position: relative to the header element. Then, add the pseudo-element absolutely positioned with the color and opacity, occupying the whole width and height of its parent (header).
Use a really large inner box-shadow if the solution by Azametzin doesn’t pan out for you (relative positioning might get tricky with your content). But please use their solution as a real one, and maybe mine as a fallback. It is a bit hacky after all.
Thank you everyone – adding the :before is so far working out nicely. Although, when it comes to responsive, is there a way to change the background size? I tried background-size but it isn’t changing.
For example, if I have the min-height at 70% so the whole header takes up 3/4th of the page but then when I shrink it to mobile size the solid background color is revealed below and the photo is small and not large enough to cover the 71% min height.
nvm I ended up using an @media screen to just shrink the overall header on mobile and now it looks great. Thank you!
Comment posted by isherwood
Please don’t ask new questions in an edit on existing questions. Post a new question.