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>