Background image aligned at bottom even when resized - css

Question

I'm trying to align an image at the bottom of my DIV, which happens to be the background. Just to make the case even more real, I also added some overlay (as that is how I am doing it in my project).
https://jsfiddle.net/jy0w2jmr/
background-size: 100% 100%;
That will make the background size 100% of the DIV, but not stretched out, so it will be 300px tall (if my DIV is 300px tall).
How do I make it, so when I resize the DIV, the background image also resizes, but sticks to the bottom of the DIV and NEVER overflows the DIV? background-position: bottom; does not seem to stick it to the bottom of my DIV.

Answer 1

Does this work for you?
#container {
width: 100%;
height: 300px;
background: url("https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg");
position: relative;
background-size: contain;
background-position: bottom;
background-repeat: no-repeat;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: #333;
opacity: 0.5;
}
#container {
width: 100%;
height: 300px;
background: url("https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg");
position: relative;
background-size: contain;
background-position: bottom;
background-repeat: no-repeat;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: #333;
opacity: 0.5;
}
<div id="container">
<div class="overlay"></div>
</div>