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

css, html

Solution

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>`

Problem

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?

Original source