I have a header section with a primary menu that is identical across the whole website. Each page have a HERO section followed by one or more section(s).
How do I add different overlay background-images that extend my header + HERO for each of the webpages? The look and feel should be of the header + hero section have the same background image extending both divs.
to change the background image for each specific page, you can select the Featured Image as the background option in the Header Element.
To change the overlay color for each page would require a separate header element for each of them. You can use the Duplicate Posts plugin, within it settings you can select Elements to make it easier to create new Header Elements