troubleshooting Question

css background-position not working in a href box

Avatar of Evan Cutler
Evan CutlerFlag for United States of America asked on
CSSHTMLPHP
1 Comment1 Solution862 ViewsLast Modified:
Greetings...

I have a html page with the following code:

<tr>
      <th rowspan="2" align="left" width="252px" valign="top">
            <img src="images/navleader.gif" height="62px" width="252px" />
            <a id="Murals" href="#"><img src="images/blank.gif" height="50px" width="252px" /></a>            
            <a id="themes" href="#"><img src="images/blank.gif" height="50px" width="252px" /></a>            
            <a id="accents" href="#"><img src="images/blank.gif" height="50px" width="252px" /></a>
            <a id="painting" href="#"><img src="images/blank.gif" height="50px" width="252px" /></a>
            <a id="consult" href="#"><img src="images/blank.gif" height="50px" width="252px" /></a>
            <img src="images/navfooter.gif" height="103px" width="252px" />                              
      </th>
      <td height="33px">test</td>
</tr>

My CSS for the first one:

a#Murals
{
      height: 50px;
      width: 252px;
      background-image: url('../images/murals1.gif');
      background-position: top;
}

a#Murals:hover
{
      background-image: url('../images/murals2.gif');      
}

My problem is that while the hover works, the image is placed halfway down the box cropping the bottom half of the image.  I need both the image and the hoverimage to be at the top and center of the a href without moving the a href itself.

Help?

Thanks mucho.
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 1 Comment.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 1 Comment.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros