CSS - Replace URL text with an image

Question

I want to replace the text of a url to an image. I am trying following:

HTML:

<div class="img">
    <a href="#">link</a>                    
</div>

CSS:

.img a{
    width: 96px; 
    height: 96px; 
    background: url("image.jpg"); 
    text-indent: -9999px; 
}

It would still show the text. I want the image instead of the text.

PS. I don't want to put the image in the html, ie.

<div class="img">
 <a href="#"><img src="image.jpg" alt="image" /></a>                
</div>

Maybe post a jsfiddle of what you've done. My site has something just like this and it works fine. — Oliver
– Oliver, Commented Nov 11, 2011 at 10:16
what if you set a min-width and min-height in your CSS, and remove the text? — AndroidHustle
– AndroidHustle, Commented Nov 11, 2011 at 10:18

Kyle · Accepted Answer · 2011-11-11 10:16:59Z

1

An anchor tag is by definition an inline element and therefore will not accept height or width declarations.

To obtain your desired effect, use display: inline-block;. (won't work in IE<8 I believe)

.img a{
    display: inline-block;
    width: 96px; 
    height: 96px; 
    background: url("image.jpg"); 
    text-indent: -9999px; 
}

answered Nov 11, 2011 at 10:16

Kyle

67.5k28 gold badges148 silver badges153 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

deviousdodo · Accepted Answer · 2011-11-11 10:16:56Z

0

text-indent applies to block level elements so just add display: block; or display: inline-block; to the .img a CSS (this will also make the width and the height work).

answered Nov 11, 2011 at 10:16

deviousdodo

9,1722 gold badges32 silver badges35 bronze badges

Comments

Jigar Tank · Accepted Answer · 2011-11-11 10:21:24Z

0

I don't know the exact CSS trick that you should use to get this done.
But as per my knowledge I can make a suggestion.
You cannot have class name as "img" as it is already a HTMl tag. If you write anything for it, that property will be considered for the <img> tag.

answered Nov 11, 2011 at 10:21

Jigar Tank

1,8142 gold badges15 silver badges24 bronze badges

Comments

Nikola K. · Accepted Answer · 2012-07-29 20:50:13Z

0

Use overflow: hidden with your current style definition.

edited Jul 29, 2012 at 20:50

Nikola K.

7,15313 gold badges33 silver badges39 bronze badges

answered Nov 11, 2011 at 10:19

user1012851

Collectives™ on Stack Overflow

CSS - Replace URL text with an image

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related