Trouble in creating responsive design

So I m trying to create to web page with first page just a background image(with background-attachment) and some text over it . Now I’ve set the height to 97vh so it covers the whole page .It works fine on desktop but it doesn’t scale well in mobile. How should I make it more responsive?So the image covers whole page only in desktop .Do I have to use media query for multiple dimensions or is there a better way.thanks.

https://codepen.io/heman1999/pen/abdzaLP

Can you share your pen?

https://codepen.io/heman1999/pen/abdzaLP