用滚动效果移动背景

我对背景的内容使用滚动效果，我希望背景和内容滚动横幅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

用滚动效果移动背景

回答

相关问题