Banner image on responsive website overwriting logo and header text on mobile view, how to load image to avoid this?

Currently when my site www.supplementbox.co is viewed on mobile, the banner image becomes overlayed with the logo and header text. On desktop view this isn't a problem. How can I load the image on mobile so as to fix this problem? What's the best solution? Keep in mind I need to keep the same image, but possibly find a way to display it differently. would i need to specify a different image per viewport, or specify to load it differently? how can i solve this problem while maintaing the same image on desktop view?