How to add an image to an anchor tag using CSS?

Question

I want to show an image with the link on the menubar. My code is as below:

  <a href="#" class="login" title="Login"></a> 

The login class in css is as below:

   .login{background: url(../img/user.png) no-repeat 6px center;}  

But, I am not able to view the image in the browser. If I tried like

   <a href="#" class="login" title="Login">Login</a> 

then image appears in the background. But I want to use only image and not the text. how can I do that?

Answer 1

You'll have to set dimensions on the a tag, and set it to display: block;.

.login {   background: url(../img/user.png) no-repeat 6px center;   width: 100px;   height: 100px;   display: block; } 

Of course replace dimensions with the correct ones.

Alternatively you could put the image directly into the a tag like so:

<a href="#" class="login" title="Login"><img src="../img/user.png" /></a>

Answer 2

You can use the following:

<a href="#" class="login" title="Login"><img src="../img/user.png" /></a> 

EDIT: I forgot to mention this would mean you have to remove the background image from your CSS.