Image revealed when menu opens over it?

[mgason]

Hi can I have a large background image which is hidden except for the area revealed when a menu opens?
It is a bit hard to explain so I put up a page with a couple of graphics that shows roughly what I mean.
The menu is created by the CMS and could be changed by the client so I can not just slice it up and ut pieces in the menu li items
http://gasolicious.com/menu_question.html

Apologies for the triple post, I kept getting an error, but seems it posted anyway. Moderator please delete the duplicates

[mgason]

To help make it clear I now have 2 demos up…

1. uses the method of moving the big image around and displaying it in the ul’s
That has the mentioned problem. The menu is WordPress. So my client can come along and add a menu item. Also I would have to somehow get WordPress to #id the menu items!
This does look the best. http://gasolicious.com/menu_question/menu_test.html

Maybe if they were fixed width AND I could get WordPress to use an id I could make CSS that would take care of any reasonable number of menus? Of course I would have to worry about WordPress changing the ids when an item was added!
Do you have any further thoughts?

2. uses a slice of the image as a repeating background. This works but does not look as nice as it does not have the variation of shade over the image vertically.
http://gasolicious.com/menu_question/drop-down-stripy.html

any ideas, any other ways to achieve this or make one of these 2 work better?
Even design ideas, something that would look good but avoid all of this trouble, say a different treatment for sub menus and just the gradient in the top bar.
Just a thought but is there any way css “clip” could help?

[Author]

Posts