How can I dynamically change the background height in CSS?

I'm trying to change my background height in CSS dynamically. I have a background that stays in place as I scroll down. So when I use a taller browser window I would like it to zoom in on my background so that there isn't a gap beneath it. My CSS is:

body {
    min-width: 100%;
    background-image: url("Photos/Tiger-4.jpg");
    background-position: 0px 0px;
    background-size: 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

How it should look [Img]

What it looks like in a tall browser [Img]

In this second image you can see that there is a white gap underneath the background. I want it to zoom in on the picture instead so that it looks good on phones. So I want the background height the same as the window height, and the width to change appropriately to not stretch it.

I have tried:

background-size: auto 100%;

This just made the background stupidly large.

Any help is appreciated :)