I have been looking for an answer to this question all over the interwebs, but I just can't find the answer.. I have a transparent header filled with a background image that is the same as my background, and I want my main div to scroll underneath it so the text is hidden. Here is the HTML:\[code\]<body> <div class="wrapper"> <div class="top"> <!-- This is my header --> </div> <div class="main"> [.....] </div>\[/code\]And here is the CSS:\[code\].top { background-image:url("http://img138.imageshack.us/img138/9215/headerqrk.png") no-repeat top center fixed; margin-top:0px; height:100px; width:1000px; margin-left:auto; margin-right:auto; vertical-align:central; padding-left:0px; padding-right
px;}.main { position:absolute; top:100px; bottom:20px; left:0; right:0; width:990px; margin:0 auto; padding-top:10px; padding-left:5px; padding-right:5px; z-index:-1;}\[/code\]I have made a jsFiddle which can be found here: http://jsfiddle.net/qcaJJ/. Can you please help me out on how to get this working? Thanks in advance!ps. Please don't mind the footer, I've used the footer from another page of mine, I don't want this one on this page 
pps. If anyone knows a way to let the nav stay on it's place and the main2 div scroll, you're my hero! Kinda new to HTML and CSS..
px;}.main { position:absolute; top:100px; bottom:20px; left:0; right:0; width:990px; margin:0 auto; padding-top:10px; padding-left:5px; padding-right:5px; z-index:-1;}\[/code\]I have made a jsFiddle which can be found here: http://jsfiddle.net/qcaJJ/. Can you please help me out on how to get this working? Thanks in advance!ps. Please don't mind the footer, I've used the footer from another page of mine, I don't want this one on this page pps. If anyone knows a way to let the nav stay on it's place and the main2 div scroll, you're my hero! Kinda new to HTML and CSS..