Move header nav and social on background banner to above the banner

SS 7.1. Starting with the Clarkson template which has the navigation along the top of a  background image. I would like to bring the navigation to a solid background above the full bleed image. Because the background is selected in the section below the header section and fills the header section, those 2 sections seem to have some sort of association, so I'm guessing part of my question is if they can be disassociated.

Here's the current header

and a good approximation of what I'm aiming for

THANKS

Hi,

Do this for homepage only or all pages? And what is your site url?

Header for all pages. ConserveNassau.org  passwd: see2theSea@dawn

Thanks

The test page is at https://www.conservenassau.org/testmapspage

I made it with an inelegant solution of creating a background image with a solid color strip at the top- so its really still all one full extent background. Code in the header for the page (since this is just a test) uses absolute position to move the nav and social up to the top. It looks ok at the browser window size I showed in the screenshot, but changing the browser window width sort of mucks it up. I'd love to hear other solutions that are more structural.

Tuanphan- Thank you! Your time to reply is very much appreciated and is a good lesson for me for using :before and :after elements. 

Interestingly, in the editor the background image overwrites the solid bar at the top of the header- which had me worried that it wasn't working, but when viewed in a browser outside of the editor, It is perfect.

Thanks again