CODEWITHSUNDEEP
htmlcss
Billa
Billa

Reputation: 2039

CSS - Replace URL text with an image

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>

Upvotes: 0

Views: 1209

Answers (4)

user1012851
user1012851

Reputation:

Use overflow: hidden with your current style definition.

Upvotes: 0

Jigar Tank
Jigar Tank

Reputation: 1774

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.

Upvotes: 0

Kyle
Kyle

Reputation: 67194

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; 
}

Upvotes: 1

deviousdodo
deviousdodo

Reputation: 9172

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).

Upvotes: 0

Related Questions