Question

I am trying to achieve a scrolling body with fixed header and fixed sidebar. I think I am almost there except that the body scrolls on top of the header. I wish I could simply increase the z-index of the header in relation to the body but this doesn’t work since the header is mostly transparent.

Here is the site: link

Any ideas?
Thanks

Edit: I should clarify that I want the content to be invisible as it scrolls underneath the header, not simply as a layer beneath it.

Answer 1

Use the same background image for your body and header, but with background-position:fixed.
This way, the header will have opacity for the content to scroll beneath and be hidden. Using fixed position will ensure that the two images appear seamless.

On a side note, I am unable to view the entire sidebar on your site, you may want to reconsider using such a rigid layout.