<div class="wrapper-parallax"> <header> <h1>Header</h1> </header> <div class="content"> <h1>Content</h1> </div> <footer> <h1>Footer</h1> </footer> </div>
body { margin: 0; } header { position: fixed; top: 0; width: 100%; z-index: -1; height: 100px; background: cyan; } .wrapper-parallax { margin-top: 100px; margin-bottom: 60px; } .content { position: relative; z-index: 1; border-top: 1px solid black; border-bottom: 1px solid black; background: white; min-height: 500px; } footer { width: 100%; position: fixed; z-index: -1; bottom: 0; background: green; height: 60px; }