Links & background images

Getting background images to show up in A HREF tags

[SuperGrover1981]

Hi gang,

I'm currently trying to get a background image to display in an <a href="xyz.html" class="xyz" style="background:url(xyz.png)"> tag.

Although the background image shows up if I use a <div> instead of <a> tag, it won't show up in front of an <a> link.

So,

(a) Is it possible to display background images in link <a> tags?
(b) If not, is there a way to include links in DIVs while still abiding by XHTML 1.0 Transitional standards?

Many thanks,
- JB

[SuperGrover1981]

Sorry guys - I just realised I've misdiagnosed the problem.

...The background from the <a> tag starts to show up IF I include "hard" content between the <a> and </a> tags. Unfortunately, I don't want to put anything between those two tags.

The problem seems to be that <a> is ignoring CSS width & height calls. Any help with this would be most appreciated. :-)

Cheers,
- SuperGrover

[Achernar]

Add this to its stylesheet:

display: block;

[cmarshall]

The display:block is what you need to do. a tags are inline by default, and inline doesn't usually pay attention to height and width.

However, I have had problems with using background-image attributes.

That's because background-image has about the lowest priority possible, and, in many of my sites, it takes a while for them to show up.

Also, if the page is large, I will often see very sluggish :hover updating if I use images. In many cases, using a background-color is more efficient.

I also avoid using directly assigned styles if I can help it, as they reduce the effectiveness of external stylesheets.