a:link-Problem with Images

[RoyalElite96]

Hello everyone,

I am redesigning a website and I want to change the background color of a PNG (with transparent pixels), when clicked.
Apparently, my only half of the background is changing.

HTML:

<a href="">
<img src="Images/logo.png" alt="Logo" style="display: block; margin-bottom: -4px; border: 0px;"/>    
</a>

CSS:

a:link {
	outline: none;
}
a:visited{
	outline: none;
}
a:hover {
	background-color: #CCCCCC;
}
a:active {
	background-color: #CCCCCC;
}

Thanks in advance!

[abyss776]

What exactly do you mean by only half the background is changing?

[RoyalElite96]

Thanks for your response!

Well, instead of the entire background changing colors, only a small area at the bottom is becoming that specific color. I tried to remove the <img style="" />, but it didn't make a difference.

I tested it in Internet Explorer, Firefox, Safari and Chrome with the same result.

[abyss776]

Okay, so I've toyed around with it a bit, and I've got it working in at least Chrome, IE, and Firefox.

Your HTML should be fine as is:

<a href="#">
<img src="Images/logo.png" alt="Logo">    
</a>

Your CSS, however, needs to be changed. It should look more like this.

a {
	text-decoration: none; /* get rid of the underline under the link (or image in this case) */
}

a img { 
	border: 0; /* remove the border around the image which appears in IE and Firefox */
}

a:hover img {
	background-color: #CCCCCC; /* change the background color of the entire image while the mouse is hovering over it */
}

The most important thing is to make sure you tell the browser that it should be affecting the image within the anchor tags and not the anchor tags themselves. Otherwise, the browser will ignore the majority of the image. That's why I used "a img" and "a:hover img" instead of just "a" and "a:hover"

Hopefully that helps!