Hello,
I have a menu made up of images and on a:hover I want to add a background image rather than simply doing image replacements (all in CSS, no JavaScript).
However, if I simply change the background image, while transparency and horizontal alignment are fine, it's just at the wrong vertical placement. No matter what I try the background image goes to the very bottom of the image and you see about a text height of background image below the main menu image.
Any ideas on how to fix this?
In it's simplest form it can be repeated as follows:
<html>
<head>
<style>a:hover{background:url('over.png');}</style>
</head>
<body>
<a href="#"><img src="item.png" style="border:0; " /></a>
</body>
</html>
item.png is showing about 10 pixels of the top of its image at the bottom of over.png Thanks.
Adding background-position: x y; still only shows the over.png at the bottom of the image and crops it to the height of one character.
Below shows the two images and what comes out on the right
