jquery - ヘッダー コンテナーは画像で展開/縮小します

Question

私はしばらくこれに取り組もうとして無視してきましたが、今は修正する必要があります。ウィンドウのサイズが大きくても小さくても、ヘッダー領域のサイズをヘッダー画像に比例して変更して、1024を超えるすべての解像度できれいに見えるようにします。初期バージョンではこれが機能していましたが、コードを適応させると、私のコンテンツはヘッダー領域の後ろになります。サイズを変更してフルスクリーンにすると、コンテンツがヘッダーの後ろに表示されます。うーん！それはとても頭が痛いです！

http://jordan.rave5.com/tmpstuff/index.html (これは私が取り組んでいるものです) http://jordan.rave5.com/tmpstuff/index2.html (これは正しくサイズ変更されます...)

これを使用してサイズを変更していますが、必要なサイズに「ポップ」するだけでなく、画像のサイズが変化します。また、要素が突然浮かび上がり、フルスクリーンに戻るとコンテンツがその下にあるようです。

        // Control Shadow Size
        $(window).load(function() {

            var imageGrad = $('.image-grad'),
                image = $('#header-image-border img'),
                border = $('#header-image-border'),
                grad = $('#header-image-grad');

            function resizeDiv () {
                imageGrad.height(image.height());
                imageGrad.width($(window).width());
                grad.height(image.height());
                grad.width($(window).width());
                border.height(image.height());
                border.width($(window).width());
            }

            resizeDiv();

            $(window).resize(function() { resizeDiv(); });

        });