Z-Index and Relative/Absolute Positioning

If I recall correctly the precedence order of z-indices is something like this:

• canvas (where the element is drawn / parents drawable area)
• bg images
• z-index: -1
• default (0)
• z-index: 1+

When you give any child element a z-index of -1, it won't go below the parent's background because of the parent's precedence.

Here is your solution (just tried on firebug and it works):

1. Remove the bg image from #menu and add a separate div under the ul.menu before the li's.
2. Give the css below to this div.
3. Now give all those brush strokes a z-index smaller than -1. -2 works.

And that should be it.

CSS:

position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:-1;
background: url(...);

I know it's not that much semantic but, hey it works, right? :P