Footer image repeats or creates whitespace when browser windows scaled

I have a webpage with a non-fixed footer, i.e. if you scroll to the bottom of the page, the footer is there. It has a background-image which needs to scale for the browser size and work on IE11. When the browser is maximized, the footer displays correctly, but when I resize it to smaller, the footer repeats. So, I set:

background-repeat: no-repeat;

However, this causes the exact same problem, except the repeated portion is replace with whitespace.

How can I make it so that it doesn't repeat or show extra whitespace when the footer image is forced to scale from the browser resize?

.footer {
    position: absolute;
    width: 100%;
    background-image: url("../image.png");
    height: 190px;
    background-size: 100%; 
    background-repeat: no-repeat;
}

<div class="footer">
        FOOTER
</div>

Solution

Instead of setting the background-size to 100%, set it to contain or cover:

.footer {
    position: absolute;
    width: 100%;
    background-image: url("../image.png");
    height: 190px;
    background-size: contain; /* 100% is cover */
    background-repeat: no-repeat;
}