Using the property background-size: cover; should be responsive, but you may prefer the results with the image centred.
Try changing the first line to:-
background: url('images/back.jpg') center ;
Of course cover will result in some cropping of the image.
That is because every image has a fixed aspect ratio. But different screens have different aspect ratios which may not match the image, so cropping must occur for the image to fit.
If you do not want any cropping, use contain instead of cover.
Well you have to have either cropping or blank space when the picture aspect and screen aspect do not match.
The only other alternative is to distort and stretch the image which may look bad.
What I would suggest is that, on small screens, you remove the requirement for the container to be 100vh. You aren’t really gaining anything from it, and it’s messing terribly with your image, whichever way you look at it.
On small screens, you could just change your CSS to something like this to get a perfectly nice result: