Hide scrollable content behind transparent fixed position divs when scrolling the page?

Question

I have a div called header that is set up with a fixed position. The problem is when I scroll the page the content of the page shows up behind the header (the header is tran

Answer 1

I was having a similar issue, and found a solution for my case. It should apply whether you are using a full screen background image, or a solid color (including white).

HTML

 

  
Some text that should be fixed to the top


  
Some text that should be scrollable

CSS

#full-size-background {
z-index:-1;
background-image:url(image.jpg);
background-position:fixed;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
}
#header {
position:fixed;
background-image:url(image.jpg);
height:150px;
width:100%;
}
#body-text {
margin-top:150px;
}

This gives me the look of a full page image with a transparent fixed header and when the body content scrolls, it hides behind the header. The images appear seamless.

You could do the same thing with a solid color background, though, arguably, it would have been easier.

2 notes: the header has a set height, I have only tested in FF and Chrome.