Hey All,
I'm trying to get the position of the background image of a set of links to match the background image of their containing div. The background image of the links is a color version of the div's background image. The background for the links should only show up when hovered over. I'm trying to use one image for all the links instead of individual images for each link. Is there anyway to make this happen. When you look at the live example. You'll see that the background for the first link matches up with the div background but none of the others do.
Here's my test code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Untitled</title>
<style>
#left
{
background-image: url(dots2.gif);
background-position: top left;
background-repeat: no-repeat;
}
#left a:hover
{
background-image: url(dots.gif);
background-position: top left;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="left">
<a href="">edit pdf proofs</a><br />
<a href="">manual</a><br />
<a href="">word</a><br />
<a href="">word</a><br />
</div>
</body>
</html>
