How to have header image fill mobile screen on homepage

Site URL: www.kryptidofficial.com My site has a homepage with various widgets that appear as you scroll down. I have a header image and logo that I'd like to have fill the entire width of the screen no matter on desktop or mobile, so that users will have to scroll down to see any part of the other widgets. I'm not sure this is working responsively because I added an image of a certain width & height and it appears to fill the screen on most browsers and devices but on Firefox Focus on an iPhone, I see the top of the next widget when I land on the homepage. I've been advised that seeing the top of the next widget distracts from the branding, which is what the header image is intended to do (it's an all-black image on which the header logo appears). Can you show me the CSS needed to guarantee that all users landing on the site will only see the menu and header image/logo no matter what device and browser they are using?