Banner and Footer image not resizing for mobile

Site URL: http://www.howtobeahero.net

Hi I am struggling to resize my banner and footer image to resize for mobile devices. I have tried a few different versions of code but none seem to work. Either all the images resize and leaves a big gap under my banner image or does not do anything at all. I think the code may need to be site specific. Can anyone help? Both images are on my homepage only. Much appreciated as the website is live now and not the best look

Thanks in advance