css - Web Parallax Scrolling Background Image and Text -

fiddle of issue: http://jsfiddle.net/vy365/3/

i'm trying create sections on page have parallax scrolling effect.

the main css i'm using achieve background-attachment: fixed background image, , position: fixed text on top of image.

i have multiple div's effect on page, , want each section cover come before it.

html:

<section>     <div id="parallax-1" class="parallax">         <div class="title">             <h1>fixed text 1</h1>         </div>     </div> </section>  <section class="scrolling-content">scrolling content</section>  <section>     <div id="parallax-2" class="parallax">         <div class="title">             <h1>second fixed text</h1>         </div>     </div> </section>  <section class="scrolling-content">scrolling content</section> 

css:

.parallax {     margin: 0 auto;     padding: 0;     position: relative;     width: 100%;     max-width: 1920px;     height: 200px;     background-repeat: no-repeat;     background-attachment: fixed;     background-position: 50% 0;     z-index: 1; }  .parallax .title {     position: fixed;     top: 80px; }  #parallax-1 {     background-image: url(http://placekitten.com/500/200); }  #parallax-2 {     background-image: url(http://placekitten.com/500/202); }  .scrolling-content {     position: relative;     width: 100%;     height: 200px;     background: #ffffff;     z-index: 2; } 

the background images cover 1 appropriately, fixed text remains fixed on page (once again, see fiddle).

is there way fix css? or have yucky jquery window scroll monitoring?

think want use position:absolute instead of position:fixed on '.parallax .title' class