making background image clickable link

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

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.

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;

}

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.

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;

}

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.