css - CSS を使用してページに合わせて div と背景画像のサイズを変更する

Question

背景に画像を含むページにいくつかの div を配置したいとします ( http://www.ubudhanginggardens.com/のように)。div のサイズを設定する方法は知っていますが、問題は、Web ブラウザーを小さくすると背景画像が同じままになることです... Web ブラウザーで背景画像を拡大/縮小したいです。

CSS

body, html {
    height: 100%;
    width: 100%;
    margin: 0px;
}
#container1 {
    float: left;
    height: 100%;
    width: 50%;
    background-image: url(../img/1.png);
}
#container2 {
    float: left;
    height: 100%;
    width: 50%;
    background-image: url(../img/2.png);
}