Header Image Cutting off/ Resizing dependent on device

Hi! I am definitely no web developer, but I have been redesigning my company site and been doing well. One issue is really bugging me though- my header image is causing nightmares.
1. I have plenty of images to choose from. My theme, Enigma, has a recommended header image size of 2000×100. However, when I choose an image of this exact size, what I get is this: https://gyazo.com/a5097d8f3a272108094dfd01c836617e SUPER stretched and pixelated. The header for some reason selects only the first ~200 pixels of the image.
2. I finally get an image to work without stretching, this one for example. https://gyazo.com/23d3eb8cfaac16afa4d8e49067519cf0 Image size: 1400×355. Despite using incorrectly sized image, the header when applied looks really nice. like this on a desktop: https://gyazo.com/3315a74ca5037bc2a4eae8270f6cdd5d

Here’s the big issue: The image I really want to use is this one: https://gyazo.com/9749b59962d21fbed50661e5cc487cf8
Dimensions: 1800*1196.
Applying this header does not result in stretching; however, the theme selects a portion which I cannot figure out how to control, and it is the very top- looks like this on site: https://gyazo.com/12eda1a75eec672b94229d45fc0327ac

Now, this doesn’t look terrible. I would obviously prefer a more colorful portion of the photo, but cropping to 2000×100 with the appropriate selection results in stretching as mentioned above. BUT- when the site is accessed via a mobile device, the full header image shows and looks awesome and shows the full image.
https://gyazo.com/6feb22bed7ed0a5c79c27c7ada9abff8

Please help with this annoying header problem, if you can! I have been searching through forums and search engines and just can’t find a solution. Again, theme is Enigma.