how do i make an image change height based on the window, without ever changing the width of the image based on the window

I am making a 404 page on my website and I just need the the background image to stay the height of the window. The CSS I currently have does that, however if the height is to short it crops the top and bottom rather than adding margins on to the side. I just need the image top and bottom to always be inline with the top and bottom of the window. you can see the page and html/css at mattmanz1.xyz/404. (I made the pixel art myself)

If the answer is "just learn bootstrap" i am okay with that. this the css. there is nothing in the body element

<style> html { height:100vh; } body { overflow:hidden; background-image: url("./lotnothot.png"); background-repeat: no-repeat; background-position: center; background-size: cover; height: 100vh; margin: 0; padding: 0; image-rendering: pixelated; </style>

edit: the answer was to change the css to this

<style> html { background:url(lotnothot.png) center no-repeat; background-size:auto 100%; height: 100%; image-rendering: pixelated;

}

</style>

thanks to @JaMit for the answer