Problem
Das Hero-Bild soll bis an den oberen Bildschirmrand reichen und hinter der Navigation liegen, ohne den eigentlichen Seiteninhalt unnötig nach unten zu drücken.
Die Lösung
Am saubersten liegt das Hero-Bild im ersten Seitencontainer und nicht als zusätzliches Element, das oberhalb des Contents Höhe beansprucht. Der Hero erhält eine Mindesthöhe, etwa 100vh abzüglich gewünschter Abstände.
Soll die Navigation darüberliegen, wird der Header transparent beziehungsweise absolut über dem Hero positioniert. Das Hintergrundbild nutzt background-size: cover und eine passende Position. Mobile Ansichten separat prüfen, weil ein bildschirmfüllendes Desktop-Foto dort häufig einen anderen Ausschnitt benötigt.