html - ウィンドウの高さよりも大きい Div の背景はスケーリングされません

Question

すべてが 1 ページに含まれる一連の「スライド」の背景として使用される画像があります。合計 4 つのスライドがあります。各スライドは画面の高さです。したがって、背景を画面の高さの 4 倍にする必要があります。また、画面の幅に合わせて画像をスケーリングしたいと思います。画像は非常に縦長で、各スライドの背景のどの部分が重要ではないため、縦横比を維持することは問題になりません。

私が抱えている問題は、画像の幅よりも小さい幅のウィンドウを作成すると、画面の幅に合わせてスケーリングするのではなく、画像の一部が切り取られることです。これまでの私のCSS：

#container {
    position:relative;
    height:100%;
}
#background {
    position:absolute;
    width: 100%;
    height:400%;
    background:url(photo.png);
}
.slide {
    width: 100%;
    height:100%;
    position:relative;
}

そしてHTML：

<div id="container">
    <div id="background"></div>

    <div class="slide">
        Content 1
    </div>
    <div class="slide">
        Content 2
    </div>
    <div class="slide">
        Content 3 
    </div>
    <div class="slide">
        Content 4
    </div>
</div>

注、IE8以降と互換性がある必要があります（つまり、CSS3のもの）