That’s working better except for the silly 120vh height? Why would you force a scrollbar on the viewport and make an image not fit ever? If you want full screen and the hero goes from top to bottom then it should be 100vh max and preferable min-height:100vh not height. That would also assume that you have negated margins/padding on the body and html or even 100vh will be too tall.
You set the height to 120vh so in essence the height of the image is greater than the width so therefore your transparent sections will not be seen unless the viewport height is smaller like this.
However as you can see the focal part of the image works better than the image you were using before. If you also had some extra transparent areas at the top and the bottom then the face would not loom so large on the screen. What you are effectively doing is the same as if you had used the value contain on the background image which maintains the image within the area described but then you get blank parts at one side or the other (or top or bottom depending on size). Generally that is a bad effect unless you have a background color or something else behind the image rather than just a blank space which looks broken. I would stay away from using contain for hero images.
Try and use images that have an excess of background to start with when dealing with hero images.
e.g. if the black background in this example was actually more image background then the whole thing would work better.
Image choice is really important but of course sometimes you have to work with what you have.
Edit: Just looked at your original link and the new image is better suited but I would not use ‘contain’ or you get blank spaces as mentioned. I would also consider using a max-width on the page to stop it getting too wide.
