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

Tags: html,css

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?

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>

    CSS Howto..

    Greasemonkey: How to do something when style=“display: none;” changes?

    CSS - How can you apply Border Shadow Inset only to 2 sides?

    how to redirect page

    How to avoid bloating pages with divs?

    How to use an image as a frame, and scroll inside? Simulating a phone on a website

    How to prevent CSS block elements from affecting parent inline-blocks

    How to vertically center text next to a radio button

    How to attach a CSS stylesheet to FXML?

    How to overlap elements inside of a ng-repeat list - position: absolute?

    How to reduce amount of space between lines of text

    How do I display epub format book in pure HTML5/CSS/Jquery

    How to use body horizontal scrollbar in free jqgrid

    How to render text in .NET in the same size as browsers does given CSS for the text

    How to make CSS color transition time correctly with transform perspective?

    how to set width,height etc to particular table in html

    CSS: How to display an image in the background of a fixed-width, centered div?

    CSS Styling - DIV - How to prevent the div element to skip to the next line?

    How to prevent javascript and css messing up?

    How to use a lower resolution image for mobile?

    How to customized select element through css?

    How to adjust width of a child element without adjusting the width of the parent in CSS?

    How to edit a css file in ASP.NET using C# to change the website design

    How to get rid of CSS cascading in internal element widgets

    CSS Position Help (horizontal sidebar showing up when animate content over)

    Is it possible to have a web browser scroll to show CSS fixed position items that are outside the viewport of the web browser?

    How can I get the font size of an element as it was set by css

    How to import css file for into Component .jsx file

    how to display navigationMenu div left side of the slider

    How to read this hover syntax in css?

    How to access CSS children properly?