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

    how to textalign in middle with css?

    How to create uparrow downarrow using simple css

    how to make css tooltip not push elements outline in FF

    How do CSS radio tabs work?

    How to fix sizes when I developed my website with 'more space' display setting on macbook retina

    How do you create a scrolling window over a still background image with CSS?

    How can I use CSS styling in my GTK# application?

    jQueryUI show/hide animation issue with child nodes

    How can I use a link to navigate between input boxes?

    How to increase or decrease space between two lines in same paragraph?

    How would I get my horizontal navigation bar to span the full width?

    How to put 3 of these tables into the correct spot with CSS

    How can I write more efficient CSS for the max-width

    How to @import without including all CSS but just the @extends ones

    How to gray out a HTML element

    How to resize image on window resize in CSS?

    How to make element sizes to fill cell sizes and increase font in free jqgrid inline and form editing

    How can I change input type of Yii CJuiAutoComplete?

    How to add this background-image effect to a div?

    how to create an external javascript and an external css file for date picker and how to use it in eclipse

    How to manage length of dashes

    How to display line items in twos?

    jQuery: How to check if an element exists and change css property

    How to set width and text-align for button with CSS

    How to override inline css coming from js

    how to make header title with buttons

    CSS/Javascript show image remove x on mouseover/hover

    HTML/CSS: How to create a box for the footer?

    How to set two divs side-by-side with the same height?

    How to split the image using Javascript + CSS?