Bhushan Firake Bhushan Firake - 7 days ago 6
CSS Question

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

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

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>