背景图片作为链接

Question

I am trying to make the background image I have in CSS turn into a link which I can reference. I have the following in CSS:

#wrapper {
height: 100%;
padding: 66px;
}


#ad_11 {
background-image: url(images/index1.png);
display: block;
text-indent:-9999px;
background-repeat: no-repeat;
background-position: left top;
padding-top:475px;
padding-bottom:0px;
margin: 20px; 
width: 519px; 
float: left;
}

#ad_12 {
background-image: url(images/index2.png);
display: block;
text-indent:-9999px;
background-repeat: no-repeat;
background-position: right top;
padding-top:475px;
padding-bottom:0px;
margin: 20px; 
width: 510px; 
float: left;
}

Then, I have the following HTML:

<div id="wrapper">
<div id="ad_11"></div>
<div id="ad_12"></div>
<br style="clear: both;" /> 
</div>

The question is how do I turn this background image into a link. Is this possible at all?

Thanks.

Answer 1

The short answer is no, it's not possible to make background images into links.

As a rule of thumb I'd say that if you need an image to be a link, then the image is content, and should be added using the img tag.

If the image is being used to replace some text then one thing you can do is put the background image on the anchor and style it so it's the size you want and hide the text using text-indent .

Here's a quick sample of how to do that: http://jsfiddle.net/tS27T/

a{
    background: url('image_url.jpg') 0 0 no-repeat;
    display:block;
    width:400px;
    height:400px;
    text-indent:-9999px;
}

UPDATE

To answer what I think your new question is i've put together this demo: http://jsfiddle.net/nChaH/

Answer 2

Strictly speaking this is not possible, however, see this link for a workaround: http://xavisys.com/css-trick-turning-a-background-image-into-a-clickable-link/