用滾動效果移動背景

我對背景的內容使用滾動效果，我希望背景和內容滾動橫幅img而不是導航。用滾動效果移動背景

我遇到的障礙是身體背景不隨內容移動，在獨立的div上創建背景的問題是，當頁面不是全屏幕高度時，會在頁腳下留下空白背景。

HTML

<body> 
<div id="navBar"></div> 
<div id="headerBar"></div> 
<div id="mainContent"><h1>This is the main content, the yellow background is not scrolling with the text</h1></div>

CSS

#navBar{ 
position:fixed; 
top: 0; 
left:0; 
width: 100%; 
z-index:1000; 
-moz-box-shadow: 0 0 5px #000000; 
-webkit-box-shadow: 0 0 5px #000000; 
box-shadow: 0 0 5px #000000; 
    background:red; 
    height:50px; 
} 

#headerBar{ 
top: 0; 
height: 250px; 
left: 0; 
right: 0; 
margin:0px auto; 
width:100%; 
position: fixed; 
z-index:-1000; 
    background:blue; 
} 

    #mainContent{ 
overflow: auto; 
z-index: 0; 
margin-top: 250px; 
    width:100%; 
    height:900px; 
    } 

    body{ 
    background:yellow; 
    }

在此先感謝喬治

來源

2013-03-20 George Reason

你不能設置在兩個單獨的div背景的東西，並且對身體？ – 2013-03-20 17:59:22

不知道爲什麼我以前沒有想到這一點！謝謝！ – 2013-03-20 18:00:54

除非我失去了你只需要改變position to relative在#headerBar

http://jsfiddle.net/ThAv5/2/

#headerBar{ 
    top: 0; 
    height: 250px; 
    left: 0; 
    right: 0; 
    margin:0px auto; 
    width:100%; 
    position: relative; 
    z-index:-1000; 
    background:blue; 
}

來源

2013-03-20 18:00:47 Kolby

用滾動效果移動背景

回答

相關問題