Keep a div at top of page, but beneath other divs

Question

I want to have a div with a background image at the top of my website. But when the page is scrolled the div should go underneath the other divs (while still at the top of the page) and not on top of them (as fixed positioning would).
I guess its not possible with CSS? But javascript/jquery?

Answer 1

Try setting your top bar/image to a lower z-index.

z-index: -1;

See example at http://jsfiddle.net/a6zdfewx/

Note: If you have a background on your site (set in the body) this will go behind it and will not be viewable. You'd need to push forward other elements with something like z-index: 2 for all elements except this which would then be z-index: 1 .