CODEWITHSUNDEEP
htmlcss
AJW
AJW

Reputation: 5863

Background-Image as link

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.

Upvotes: 1

Views: 8173

Answers (2)

Jamie Dixon
Jamie Dixon

Reputation: 53991

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/

Upvotes: 4

Barry Kaye
Barry Kaye

Reputation: 7761

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/

Upvotes: 0

Related Questions