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?

If the "top div" contains only an image, why not use background of the `body`? — Teemu, Aug 29 '14 at 17:28
Can you share some of your code? It's definitely possible with CSS. — aniskhan001, Aug 29 '14 at 17:32

score 3 · Accepted Answer · answered Aug 29 '14 at 17:35

3

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.

answered Aug 29 '14 at 17:35

James Korden

724
4
19

1

This is the answer you are looking for. Accept it. – aniskhan001 Aug 29 '14 at 17:38
I've tried z-index which didnt seem to work. But your fiddle works, so apparently ive not done it right - ill give it another shot! – Mac Luc Aug 30 '14 at 08:18

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

1 Answers1