Skip navigation
Currently Being Moderated

making background image clickable link

Aug 7, 2012 9:29 AM

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?

 
Replies
  • Currently Being Moderated
    Aug 7, 2012 9:36 AM   in reply to dawnnolan54

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 7, 2012 9:39 AM   in reply to dawnnolan54

    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;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 7, 2012 9:49 AM   in reply to osgood_

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 7, 2012 9:53 AM   in reply to dawnnolan54

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 7, 2012 10:20 AM   in reply to dawnnolan54

    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;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 7, 2012 10:24 AM   in reply to Rik Ramsay

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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 7, 2012 12:47 PM   in reply to Rik Ramsay

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

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 1, 2013 10:47 PM   in reply to dawnnolan54

    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-c lickable-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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points