...

View Full Version : Is there a way to change the default rectangular view for a:hover background images?



CrashNsink
05-24-2012, 05:02 AM
For instance,


a:hover {
color: black;
background:url("images/nav-hm.png");
}

The background image displayed upon hover is always enclosed in a rectangular box around the link even though the image isn't rectangular .

Is there a way to remove the rectangular box enclosure ?

Thanks in Advance ~ :thumbsup:

jrote1
05-24-2012, 01:38 PM
Try adding border: 0;

Lerura
05-24-2012, 02:01 PM
@jrote1; adding a border changes nothing.

to make the link high enough to display the entire image, you can do:

a{display:inline-block;
height:XXpx;
}


where XXpx is the height of the background-image.

CrashNsink
05-24-2012, 02:58 PM
@jrote1; adding a border changes nothing.

to make the link high enough to display the entire image, you can do:

a{display:inline-block;
height:XXpx;
}


where XXpx is the height of the background-image.

I tried setting the exact height and width of the background image, but it still turned out as a rectangular image =/ .

Lerura
05-24-2012, 03:02 PM
do you have a link to your page,
or can you post your entire code and attach relevant images.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum