Sizing/cropping an image to display properly on desktop and mobile

I have spent 6 hours trying to get this to work properly today. Essentially I have an image of mountains that I want displayed at the bottom at all times with text above it. I need this to resize as the screen size changes. It is a landing page and client is very dedicated to the idea. I had no problem getting this to work perfectly on desktop. However, on the mobile version I want the mountains to be cut off, not tiny at the bottom. I can get it to work somewhat 2 ways:

1. Displaying it as a background with fit for desktop and cover for mobile. However, the resizing doesn't work.
2. Displaying it as a section background. However, the text gets cut off on mobile.

Hopefully this makes sense. If you have any ideas, I'm open to them!