Header Image Problems

<p>Hello!</p>
<p>I noticed when I upload my header image, part of that picture gets cropped off anyway; and when I resize my window or when I view the website from my phone, the image itself becomes responsive and I start to get the whole picture back. (I hope I am making sense so far.)</p>
<p>I wanted to see if I can upload an animated GIF file as the header image and it uploaded fine. However, when I have the window at full size, part of that file gets cropped off at the bottom and I did not crop it on my own. The same thing happened when I try to resize the window.</p>
<br />
<p>This is my thought process:</p>
<p>I tried to adjust the height of the header, but that did not work too well for me. </p>

/*.custom-header {
	width: 100%;
	min-height: 550px;
}*/

<p>The question becomes: is there a way to make sure I get the full image at the desired height without “cropped off” at the bottom and get it to stay the same size when I resize the window?</p>
<br />
<p>I am open to any suggestions. If I can get a quick response at your earliest convenience, that would be greatly appreciated! <br />Have a good day! <br />Christian Souvenir</p>

The page I need help with: [log in to see the link]