Aligning image in a way so that it appears at the perfect place over another image that is center aligned?

http://jsfiddle.net/Weach/1/

This is the problem: I created a background image using the css which you can see in the JSfiddle. I center aligned it so it always comes in the center horizontally and starting fro开发者_StackOverflow中文版m top.

There is an image I want to always come above the menu option. It's not really an image but I will make some effect using JavaScript. I always want this image to appear above the menu option irrespective to the browser or the resolution of the screen.

Did you consider using your background as a css background?

Position your other image inside it, using margin, hard defined width (or float).

(Also, cleaned your demo a bit).