Can you link a backgroun-image?

[svoltmer]

I need to put a <a href> on an image that is placed as the background-image to a <span> class, but when I put the <a> tag around the <span> that has the image no image is displayed. Ex;

.class {
background: url('images/picture.gif') repeat-n;
width:177px;
height:114px;
}

[leoo24]

i'm not aware that you can make a background into a link, i would like someone to tell me i'm wrong, as it woulod be handy:)
if it were to work you would wrap the <a href around the image itself, not the whole span.

havent i seen you somewhere b4? ;)

[AWildman]

Do you have a &nbsp; in the span? Can you then just put the anchor on the non-breaking space? Or, can you make a transparent gif the size of the background pic, put it in the span and anchor it?

[leoo24]

can you make a transparent gif the size of the background pic
i think if he could do that then he could just bring the image into the front and link it normally, i assume he wants to preserve his layout by having the background image link? but then, if you have something 'ontop' of the background image it would get in the way?

[broniusm]

I have an idea! :D

I don't know what browser svoltmer is targeting, but in IE, I do "onclick" events all the time on every sort of object on the page-- if you've got a TD with a bgimage, you can simulate the same effect as an href (for the most part). This would allow for any content to appear in the TD (or span or div) and still the click "on the image" would get fired.

Other than fancy footwork, I have to agree with AWildman that given the params, an anchor at fixed dimensions with a nbsp makes most sense:

.aclass {
background: url('images/picture.gif') repeat:no;
width:177px;
height:114px;
}

<a href="neverneverland.htm" class="aclass">&nbsp;</a>

[svoltmer]

Thanks, that works for IE but I am still not able to see the image in Mozilla.
Could I use CSS positioning on an <image> tag? All I really need is image out there with the link. (The image includes the text)

Here is the HTML:
<div class="rightbar">
<a href="page_name.html" class="class1">&nbsp;</a>
<span class="class2"><span class="class3">
<a href="page_name2.html">"yada yada yada</span><br />yada yada yada</a></span></div>

[broniusm]

I'll be the first to say it this time: run your html thru a validator (and you might consider sending your css thru a validator as well). It's intertwined making it not "well-formed", meaning that the structural elements of the document are overlapping (<span>, then <a> then </span> then </a>). Could be part of the issue.

btw: if your image isn't showing up for background-image:url(), then double-check your syntax. The reason I say that is that the title of your discussion contains "backgroun-image".

just trying to help
-bronius