リサイズしても背景画像が一番下に揃えられました

Question

DIVの一番下の画像を背景に合わせようとしています。ケースをさらにリアルにするために、オーバーレイを追加しました（これは私のプロジェクトでやっている方法です）。伸ばし背景が大きDIVの100％ではなくなりますので、それはなります

background-size: 100% 100%; 

https://jsfiddle.net/jy0w2jmr/ 300ピクセルの高（私のDIVは背の高い300ピクセルの場合）。

DIVのサイズを変更すると、背景イメージのサイズも変更されますが、DIVの下部に固執してDIVをオーバーフローしませんか？ background-position: bottom;は私のDIVの底に貼り付けるようには見えません。

Answer 1

これは機能しますか？

#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>

#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; 
}