This is the "why" this solution works.:)
A fixed positioned element or a fixed background attachment is always relative to the viewport. So when you apply background-attachment fixed to an element then the background will only show in that element as long as it is over the image.
If for arguments sake the image was say 20px x 20px and we placed it at top left (0 0) with no repeat then it gets placed in the top left of the viewport. However if your element is at a position in the page that is further away from the top than 20px then nothing will show because the image isn't attached to the element - it's attached ot the viewport.
You can think of the element as a window that opens onto the background underneath and you have to move this window around until you can see the image.
When we use the repeating image on the background then the whole viewport is covered but we will see through our "window" only the part of the image that lies exactly in that spot - which is just what you wanted for this example.
- what is going on with margin-left:-999em;?
It's an offscreen hiding technique that is kind to screenreaders (and search engines) because content is not removed as would happen with display:none. It also works better in older ie versions (7 and under) as they quite often don't like the reflow that display:none causes.
It's also better than using left:-999em because IE7 is buggy with that also. I find the margin-left:-999em approach the most stable and never have any problems with it unlike other methods that seem to cause bugs once in a while and as seen in the forums from time to time.
- what is "commented backslash mac hiding hack" about?
That is from an old old old menu and is not needed these days and is a technique fro hiding certain code from IE5 mac. No one supports IE5 mac (apart from one person I saw the other day who had to support it ) so ignore it.
No the code is for IE6 and under because they don't understand hover on anything but anchors so you need to add this function with script. IE7 doesn't need the script and the code you saw:
if lt IE 7
That says "If less than IE7".
You can read more on Conditional Comments here.
Maybe you know a tutorial that explains doing this background trick with a menu?
I haven't seen it done before so unless I write one I can't point you anywhere useful
I put a new version online. I got the graphic down to 25k, can get it smaller. I will also make it vertically seamless. I am happy with that file size as I use it in several places.
The only suggestion I could make depends on whether you wanted a smooth gradient transition on the longer menus. On the menu above if you drill down to the third level you will see the menu gradient repeating again and giving a sharp cut off.
This doesn't happen in my last example because I took your image and then flipped it vertically and stitched it to the bottom so that the gradient goes up and down continuously without noticing. It does of course mean using a bigger image.
I'm not sure if you wanted that smooth effect anyway but if you did then you'd have to use the method above or at least make sure your image is as tall as all the items in your menu (but of course that assumes the menu is at the top of the page).