Replacing anchor text with an image

Question

I want to replace anchor text with an image using CSS. Here is my code.

HTML

<div id ="first"> <a href="#">Read More</a> </div> <div id ="second"> <a href="#">Read More</a> </div> 

CSS

 #first #second a{ background:url(../images/layout/tab.png); float:right; } 

Here is the JsFiddle link http://jsfiddle.net/chhantyal/GDF9K/

Why doesn't it work? What is the right way?

Answer 1

Your selector is not fulfilling what you expect. Your current selector matches this structure:

 <div id="first"> <div id="second"> <a href="#">Hello</a> </div> </div> 

You must be detailed:

 #first a, #second a { background:url(../images/layout/tab.png); float:right; } 

Demo: http://jsfiddle.net/GDF9K/2/

But if you asked about the right path, I suggest you use a class:

 <div id="first"> <a class="foo" href="#">Read More</a> </div> <div id="second"> <a class="foo" href="#">Read More</a> </div> 

And your CSS becomes:

 a.foo { background: url(../images/layout/tab.png); float: right; } 

Answer 2

Check Updated Jsfiddle

 #first,#second a{ background:url(../images/layout/tab.png); float:right; } 

For reference check this

Answer 3

use text-indent:-5000px in css

text is removed from the screen, but the background image should remain

Answer 4

try it

http://jsfiddle.net/GDF9K/4/

just replace the background url with your image url and set the appropriate width and height.

Here is a preview of the next step.

http://jsfiddle.net/GDF9K/5/

Hope this helps!