How to get header image to be responsive while also not moving down (HTML/CSS)

I've been working with HTML and CSS for a very short time and took on a project for my school. I'm currently building a website for our art fair! I've stumbled upon an issue where when I resize my tab the header image seems to shrink incorrectly... You can also only see it properly if on a 1080p screen. I was wondering how I would resize the header to move consistently when shrinking/expanding the page or increasing/decreasing the resolution of the screen. I made a fiddle so you can have easy access to my code. Any help would be greatly appreciated. Thank you!

Fiddle: https://jsfiddle.net/Lucasizq/nu7fLr1k/7/

.mainphoto {
  position: absolute;
  padding-top: 50px;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
}

This is where I think my error is, but I am unsure.