Remove background colour on image links

[greencode]

I'm using a background colour for my links and also adding a bit of padding so that they are nicely highlighted on the page. The only trouble with doing this is that any images that are being used as links also have the link background colour included, which I don't want to appear on images.

What it seems to do though is add the padding and background colour to the bottom of the image and not all of the way around, which is what I would have thought would happen. I've tried doing this in CSS:

img a {
background: none;
padding: 0;
}

But that doesn't seem to do anything?

Without applying a separate class to each image on the site is there any way around this to stop the padding and background colour of a normal text link appear on my images?

Any help would be greatly appreciated.

[rocknbil]

img a {

It's because the img is inside the anchor, you'll never see an anchor inside an image, which is what your selector suggests. :-)

This anchor selector is not any different than others, changing the style of the image will have no effect. I think you'll need to create a class, and you may need to apply it to all states to insure one of the other anchor states doesn't cascade:

a.no-bg,a.no-bg:link,a.no-bg:active,a.no-bg:hover,a.no-bg:active {
background:none;
}

Actually a better approach might be to create a class for the "backgrounded" links, having a background on all links by default would be a legibility challenge. I've seen sites with these, IMO it's not a great idea, but you know your site . . .

[Fotiman]

Another alternative may be to do something like this:
<a ...><span>Text</span></a>
<a ...><img></a>

Then you could apply your background/padding to:
a span {}

Instead of applying it directly on the link itself. Just a thought.