Header Image Not Responding Correctly

I cannot get the header image to display correctly on a mobile device. On a desktop, the image responds so-so, but when I pull it up on an iPad or a phone, it distorts the image so much you can’t tell what it is.

Is there any way to make it respond in such a way that you can tell what it is no matter what device or computer you’re viewing it on?

My site is: ToHaveAndToHolst.com

Thanks!