That’s pretty much how any site or theme would display a large background image of that size when it’s designed to be responsive. The browser scales the image to fit the screen the best it can without distorting or destroying the quality of the image (stretching or shrinking too much).
Since your image shows 2 people standing more towards the right of the image instead of the center, it will appear more cut off on smaller devices.
What some sites do is create a smaller version of their image to show up when the site is being viewed on a smaller mobile device. If you are able to make a smaller version that will fit the size of a mobile device then I can show you where to add code in your CSS to make your site show the smaller image on mobile. It’s pretty easy to do, just need that smaller image.
That would be great! I can definitely edit the image into any size or dimension. I would really appreciate you showing me where to add the code! Will the code specify the orientation of the device? It only cuts off the outside person in portrait orientation. Or do i have to use one image for both orientations? If so, I may need to experiment with dimensions? Also, does the image need to be large enough to use on larger mobile devices, like iPads? I have a feeling the dimension ratio is more important here than the actual image size. Does that make sense?