jquery - 背景をフルウィンドウにする最良の方法

Question

だから私はここにこのサイトを持っていますhttp://jamessuske.com/freelance/seasons/

ご覧のとおり、背景がいっぱいで、ページごとに異なる背景があります。

したがって、私の index.php には次のコードがあります。

<?php include('include/header.php'); ?>
<img src="images/index.png" id="bg" class="bgwidth">

私のheader.phpファイルには次のものがあります：

<div class="sitebar">
<ul>
<li><a href="#">Site One</a></li>
<li><a href="#">Site Two</a></li>
</ul>
</div><!--sitebar-->

しかし、サイトバーの div がまったく表示されません: 以下は私の CSS です

body{
    background-color:#000;
    margin:0;
    padding:0;
}

#bg { 
    position: fixed; 
    top: 0; 
    left: 0; 
}

.bgwidth { 
    width: 100%; 
}

.bgheight { 
    height: 100%; 
}

.sitebar{
    position:relative;
    width:100%;
    background-color:#000;
    height:30px;
}

サイトバーに 1000、バックグラウンドに 999 の z-index を設定しようとしましたが、うまくいきませんでした。

したがって、ページに配置したものは何も表示されないため、これは全画面表示で背景を表示するための最良の方法ではない可能性があると思います. 助言がありますか？

これは、フルスクリーンで背景を取得するのに役立ついくつかのjQueryです..

<script type="text/javascript">
$(window).load(function() {    

    var theWindow        = $(window),
        $bg              = $("#bg"),
        aspectRatio      = $bg.width() / $bg.height();

    function resizeBg() {

        if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
            $bg
                .removeClass()
                .addClass('bgheight');
        } else {
            $bg
                .removeClass()
                .addClass('bgwidth');
        }

    }

    theWindow.resize(resizeBg).trigger("resize");

});
</script>

サイドバーを画像の下に配置し、位置を相対的に設定すると機能しますが、サイトバーを画像の上に配置することをお勧めします。

Answer 1

これをcssに追加します

.sitebar {position:absolute; z-index:999;}