CSS #facey { floa...">
Geek Answers Handbook

How to get anchor label on div background image?

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'm trying to put anchor tags on them to go to the corresponding websites, and I'm not sure how this works because the sprite images are used as background images and an anchor The tag doesn't seem to work for me inside the div? I'm not sure what I'm doing wrong here?

+4
source share
3 answers

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

+8
source

Put the background on the anchor, not on the div, this is an anchor tag that you can click at the end. Here the div is really completely redundant.

 <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; }
+1
source

You cannot link to files from a file system like this; it is considered a security vulnerability in any browser other than IE. Try using relative paths instead:

 #facey { float: left; width:32px; height: 32px; background:url(icons/facey%20sprite.png) no-repeat 0 0; }
0
source

More articles:


All Articles