How to get anchor tag on background image of div?

Question

HTML:

<div id="facey">
    <a href="http://www.facebook.com.au"></a>
</div>

css:

#facey {
    float: left;
    width: 32px;
    height: 32px;
    background: url(file:///C|/Users/User/Documents/TAFE%20-%20Web/ICAWEB411A%20Design%20simple%20web%20page%20layouts/testing%20color/icons/facey%20sprite.png) no-repeat 0 0;
}

#facey:hover {
    background-position: 0 -32px;
}

I have a css sprite for social media icons and I've been trying to put an anchor tag on them to go to there respective websites and I'm not sure how it works because the sprite images are used as background images and the anchor tag doesn't seem to work for me inside the div? I'm not to sure what im doing wrong here?

Answer 1

Add CSS style display:block; to #facey a.

Answer 2

Put the background on the anchor and not on the div, it is the anchor tag that is clickable in the end. The div is actually completely redundant here.

<a href="http://www.facebook.com.au" id="facey"></a>

a#facey {
  float: left;
  width:32px;
  height: 32px;
  display: block;
  background:url(file:///C|/Users/User/Documents/TAFE%20-%20Web/ICAWEB411A%20Design%20simple%20web%20page%20layouts/testing%20color/icons/facey%20sprite.png) no-repeat 0 0;
}

a#facey:hover {
  background-position:0 -32px;
}