Home Page Image Issue

Hi, I just purchased BuddyApp. I like it so far, I’m just messing around with some stuff and trying to get a feel of how everything works. So for starters, I added an image of a city to the home page. But when I go to the homepage on my mobile phone, it comes out very strange. It looks like the image is horizontally cut in half. It doesn’t show the full image, and it looks like as if it took the top half of the image (the clouds) and its covering a big portion of the bottom half of the image (the city). And then on desktop, it also doesn’t look that great, part of the image at the bottom is cut off. I wonder if there is a way to position the image more evenly on a desktop screen?

For a frame of reference, I used the same image with another theme, if you don’t mind, if you could check it out you can get a sense of what I’m trying to accomplish: https://www.realtsencounters.com/encounters/

You’ll notice there that on a mobile phone that image looks perfect. I would love to get it looking exactly like that if possible. That was used using optimize press, and I made the image “full width”. When visiting that same site on desktop, only the clouds show up because of the lack of bottom padding. However when narrowing the desktop screen (or viewing on a mobile device) you can then see the entire picture (building, clouds, etc.).

Anyway so my point really is, when looking at the current state of the image at: transencounters.com .. I would like the image to show up normally, not cut in half or whatever kind of affect is on it. Please advise/let me know what my options are. Thanks in advance, I look forward to working with this new theme.