css - show full background image on hover link

I found it quite difficult to find the solution to this one.

So I thought I'd blog it so the solution may be easier to find. Here's some search terms i tried.

css show full background image hover link
css background on hover link problem
css background image show full
css hover background stretch

The solution for this I found through this link.

http://www.daniweb.com/forums/thread109916.html

Basically it's the css on the :link and not the :hover that you need to change. This is where I was going wrong.

the solution then for me was


a.link:link, a.link:visited {
text-decoration: none;
color: #fff;
font-size: 14px;
display:block; /*This Cover Full TD */
width:100%; /*This Will Make Fixes Size Link (Use Image width)*/
text-align:left;

}

.link:hover {
background:#000 url(../images/menu_bg1.gif) center center fixed;

}


you will then need to stick the class name in you link html, ie

Example