making background image clickable link

[dawnnolan54]

I have several div tags with background images in them.  I want to make the background images clickable links.  what is the easiest way to do this?

[Nancy OShea]

You can't.  Background images are not part of the HTML;  they are part of the CSS. 

To make images clickable aka hyperlinked you need to insert them into your HTML.

<img src="some_image">

Hyperlinked image:

<a href="some_link.html"><img src="some_image"></a>

Nancy O.

[osgood_]

dawnnolan54 wrote:

I have several div tags with background images in them.  I want to make the background images clickable links.  what is the easiest way to do this?

Yes,

Include an anchor tag in the div:

<div><a href="yourlink.html"></a></div>

Then set the anchor tags css attributes to the width and height of the <div> and display: block; which makes the whole area clickable.

a {

display: block;

width: widthOfDiv;

height: heightOfDiv;

}

[Jon Fritz]

Osgood is on the right track. I would only add a small amount of additional CSS...

<div id="yourdivid">

     <a href="yourlink.html"></a>

</div>

Then set the anchor tags css attributes to the width and height of the <div> and display: block; which makes the whole area clickable.

#yourdivid {

height:100px;

width:100px;

}

#yourdivid a {

display: block;

width: 100px;

height: 100px;

}

This way, only the <a> tags within a div with id="yourdivid" will be affected.

[MurraySummers]

Not valid HTML to put an anchor tag around a div.  Anchors are inline and divs are block.  You can't put block into inline.

[Rik Ramsay]

I have used this method consistenly without issue:

<a id="YourDivID" href="http://YourLink"></a>

#YourDivID {

          background-image: url(YourImageLocation);

          background-repeat:no-repeat;

          display:block;

          width:??px;

          height:??px;

          margin:0;

}

[MurraySummers]

I think that's a winner.  The wrapping div is unnecessary.

[hans-g.]

Maybe interesting, a little variation with Rik's rules: http://hansgd.de/AdobTest/_Backgr/backgr.php

[Mark-2090]

Yes, the background image can be made clickable.

Here is the link to get the info to one method: http://ran.ge/2009/11/11/css-trick-turning-a-background-image-into-a-clickable-link/

Basically it is written like this:

==CSS==

#bkgrdimage {

    background-image:url ('image.png');

    display:block;

    height:??px;       (image height)

    width:??px;        (image width)

    text-indent:-9999px;  

    }

==HTML==

<a href="http://????" title="Title of Link" id="bkgrdimage">Basic Text For this Link</a>

---------------

The text indent places the "basic text for this link" outside the browser screen.

[BorneZeus]

http://ran.ge/2009/11/11/css-trick-turning-a-background-image-into-a-clickable-link/