javascript - 複数の Div でのバックストレッチ

Question

縦にスクロールする単一ページの Web サイトを作成しようとしています。私のデザインは画像ベースで、学年に合わせてモバイル対応にする必要があります。

私が抱えている問題は、背景画像にあります。バックストレッチを体だけで動作させることはできますが、コンテナーの高さ全体に 1 つの画像を表示するだけでなく、さまざまな div で動作させる必要があります。

私はjqueryの経験がありません。これは間違いなく私の主な問題です:(

どんな提案でも大歓迎です。これが私がこれまでに持っているものです。

<div id="container">

        <div id="one">
            <script>
                $("#one").backstretch("img/banner1.jpg")
            </script>

        </div>

        <div id="two">



        </div>

        <div id="three">
            <script>
                $("#three").backstretch("img/banner2.jpg")
            </script>
        </div>

これにより、画像が div に適用されますが、y 軸を中心にするのではなく、画像の一部を非表示にするだけで、画像がまったくスケーリングされなくなります。