最好的辦法有一個背景全窗口

所以我有這個網站在這裏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-->

，但我不能在所有看到sitebar格：低於是我的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; 
}

我試着在sitebar上設置1000的z-index，在後臺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>

如果我把圖像下方的側欄和位置設置成相對的作品，但我寧願有sitebar在圖像上方。

來源

2013-07-19 user2499454

嘗試'位置：absolute'代替。我認爲這可能是你正在尋找的。還要確保你把寬度：100％;如果你希望那些在子項上工作，那麼''''''''''''''身高'：100％ – Chad

添加到您的CSS

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

來源

2013-07-19 16:11:02

最好的辦法有一個背景全窗口

回答

相關問題