Thursday, 16 July 2009

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.

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, {
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)*/


.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


No comments: