CSS a & img attributes?

November 16, 2005 1:17 PM

Why doesn't a img { background-color: transparent; } work?

On my website, I give all my text links a background color. This is undesireable on image links, so I thought the above rule would cover it. It doesn't, and I have had to resort to giving every link with an image a class of "nobg." This class has one rule: background-color: transparent;.

Is there any reason this does not work and can anyone give me any insight as to how to fix my issue without changing the class of EVERY SINGLE IMAGE LINK?

posted by Third to Computers & Internet (27 answers total)

I don't understand. Isn't the bounding box for an image exactly the size of the image? So the background color would only be visible if the image had alpha blending, like a PNG.
posted by smackfu at 1:25 PM on November 16, 2005

the link around the image is probably being stretched to the size of the image and as you haven't disabled the bg color on the actual link it looks like your img thing hasn't worked. Or at least that's my theory

try

a img { ... } instead
posted by alexst at 1:28 PM on November 16, 2005

Response by poster: Yeah, but in Firefox 1.5 20051107; OS X 10.4.3 my site's images have a background color that almost looks like a border on the bottom side of the image. It does it in Safari, too.
posted by Third at 1:30 PM on November 16, 2005

Example link? :P
posted by alexst at 1:32 PM on November 16, 2005

It's the link that needs to have the background property set, not the image. I haven't encountered this exact thing, so I'm not sure, but what about making sure that the border on the image is 0? This used to be something you could do in the olden days, i.e.

[a href=gfdg][img src=xxx border=0][/a]

would prevent your image-links from having a blue link border around them. Just a thought.
posted by RustyBrooks at 1:32 PM on November 16, 2005

I think you're trying to change the styling of a, but "a img" only applies to the content of img. I don't think there's a CSS selector for "a's having descendant img", so changing the class seems the only way (and I think, the correct way) to do this.
posted by cillit bang at 1:40 PM on November 16, 2005

a img { border: none; .... } would do it rusty :)
posted by alexst at 1:40 PM on November 16, 2005

My guess is that you're giving your text links a background color using something like this:

a { background-color: purple; }

Right? That's the problem. The image within the link may have a transparent background, but the link it's embedded in doesn't, so you see through the transparent background to the colored background behind it. When you change the class of the link, the style associated with the class takes precedence over the overall style for the tag.

Now, how do you fix it? I'm sorry, but I don't think there's any cross-browser way to fix it without changing the class of either every single image link or every single text link, or both. There just isn't a way to create a set of CSS selectors that will do what you want.
posted by cerebus19 at 1:44 PM on November 16, 2005

can we see an example of what you want to fix?
posted by o2b at 1:45 PM on November 16, 2005

Is it the site in your profile? Cause I don't think I see the problem you're talking about, but your linked images shift majorly upon rollover (Safari and FF Mac).
posted by o2b at 1:47 PM on November 16, 2005

Response by poster: Just to clarify: the text links have the background-color on a:hover. So do the images.

RustyBrooks: The border="0" thing didn't work, as I have tried it in the past and again just now. However, going off your idea of the link needing the attribute and not the image, I tried "a img a:hover" and "a img:hover" to no avail, but I think we might be going in the right direction. The "a img:hover" gave me some strange results: whenever I would hover over the actual image, the part of the background color that would show would be thin. If I moused over just below the image, the border would be thick and the link clickable.

alexst: An example of what I am talking about can be found here

On preview: Yeah, the images jump around because I had the "a img:hover" thing going on. That's fixed now. See the link above for what I am talking about. Most of the images on the site are fixed now, but I don't want to have to make all my image links have a specific class.
posted by Third at 1:52 PM on November 16, 2005

Response by poster: cerebus19: I understand what you are talking about, and I was afraid that was the issue. However, I got the "all text links have a bg color" idea from Flickr. They don't seem to have special classes for all their images, yet still manage to pull off the effect I want, which leads me to believe there is actually some hope.
posted by Third at 1:58 PM on November 16, 2005

Shouldn't it be "a:hover img"?
posted by alexst at 1:59 PM on November 16, 2005

You might want to try setting the padding, margin and border on all your images to "none" as well.
posted by alexst at 2:02 PM on November 16, 2005

Best answer: Ah, ok.

What you're seeing is the result of the A tag not wrapping precisely to the size of the image, because the image is an inline element, hence it positions itself relative to the baseline (and there's always space for descenders under the baseline, which is filling in on hover).

You could try two things:

a img {display: block;}

But this would also mean that you couldn't have any images inline with your text (lorem ipsum [img] lorem ipsum), because a block-level element will always break to the next line.

you could try:

a img {vertical-align: middle;}

But it doesn't always work -- it depends on other things.
posted by o2b at 2:05 PM on November 16, 2005

Flickr doesn't, so far as I can tell, have images with transparent backgrounds. They do actually have this in their CSS:

a.image_link:link, a.image_link:visited, a.image_link:hover, a.image_link:active {background-color:transparent;}

But I haven't found a page that actually uses it.
posted by cerebus19 at 2:09 PM on November 16, 2005

cerebus: It might be enabled via a JavaScript event hook.
posted by alexst at 2:12 PM on November 16, 2005

it would also make life easier if you put your images in divs or p tags instead of using BRs.

Well, it would make my life easier if it were my site.
posted by o2b at 2:13 PM on November 16, 2005

Response by poster: o2b, you nailed it. That's a great explanation for some other CSS quirks, too, what with elements not wrapping precisely.

a img { display: block } works just how I need it. I would much rather specify the "display: inline" property when I need it than make each link have a specific class.

Thanks for your help everyone.
posted by Third at 2:17 PM on November 16, 2005

Response by poster: o2b: Yeah, but I'm using Blogger, and what I have works for me now. Blogger automatically puts
tags in place of carriage returns. So far, I haven't run into trouble because of this.
posted by Third at 2:20 PM on November 16, 2005

Ah -- i was fooled by the usually-Wordpress template.
posted by o2b at 2:23 PM on November 16, 2005

What I do in this situation is:

body {
background: #fff;
}

a {
text-decoration: none;
color: #000;
}

a:hover {
background: #ff0000;
color: #fff;
}

a img {
border: none;
}

a:hover img {
background: #fff;
vertical-align: bottom;
}

Slight difference in the vertical-align value. That way you don't have to use classes.
posted by juiceCake at 2:25 PM on November 16, 2005

Response by poster: I suppose that would work with

a:hover img {
background-color: transparent;
vertical-align: bottom;
}

too. If I run into the issues with inline display that o2b referred to, I might have to try this method.
posted by Third at 2:30 PM on November 16, 2005

background: none;

background-color is deprecated.
posted by yerfatma at 3:18 PM on November 16, 2005

background-color is deprecated.

This isn't correct.

"background" is the shorthand notation that allows you to specify background-color, background-image, background-repeat and background-position all at once.
posted by o2b at 6:11 PM on November 16, 2005

Duh: I think I was thinking of background-image.
posted by yerfatma at 1:42 PM on November 18, 2005

Response by poster: I thought that background-image was also valid, as well. I think "background" is a shorthand method to set all the background elements, like o2b says.

See the W3Schools page on the background attribute for some more details.
posted by Third at 2:25 PM on November 19, 2005