That’s because your hero element starts at the top of the viewport so any content you have in that section (like your banner and topnav) is going to be on top of the background image. Your hero image should start in an element that follows the above elements and therefore won’t share the same space.
Your height of 120vh is a magic number that makes no sense. I mentioned this before but why do you want the image to go below the fold on every device?
Also you used the value contain which is resulting in the blank spaces that @Archibald mentions and I also mentioned in the other thread not to do that or you would get white gaps around the image.
Here’s an example (quickly adapted something else) with a hero image under the header and nav and the hero will stretch to the bottom of the viewport from where it starts under the nav.
(Ignore the nav as that was just some old code copied quickly for the demo.)
As mentioned before if you need finer adjustments for small screen then adjust its position slightly in media queries as required. You could add more media queries for height if required. However the current image looks pretty good across all sizes to me.