A high quality image with aspect ratio of 16:9 pixel is an ideal size of a hero image (e.g 1200 x 675px, 1600 x 900px, 1920 x 1080px).
But to clarify, resizing your image will not resolve your background-image issue, the background-image is responsive in its own way. Your page will be viewed on different screen sizes and on portrait oriented mobile phones, the containers/section will respond to that sizes and so does the background-image.
You can not fit a landscape image on a portrait container, without squeezing/stretching or cropping it.
Your best option, in this case, is to utilize the background-position property. This way you can control which area of the image is to focus, and which is to cut when the container gets narrowed.
More information about how background-image works here.
If you really want the image to be 100% fit on the container regardless of the screen size. Then make it a Featured Slider Below Masthead.
Slider Revolution Documentation
You can install Slider Revolution under PRO > Validation > Extensions
Hope that shed some lights,