How to declare a link without any content?

Question

I want to declare a link without any content, instead I want to use a background image for it. But I can see the background only when I put something between <a></a> tags. How can I solve it?

Answer 1

To use a background image, give it a style of display: block; or display: inline-block; depending what you're after.

Example HTML:

<a href="#" class="ImgLink"></a>

CSS:

a.ImgLink {
  display: block; 
  background: #FFFFFF url(img.jpg); 
  width: 200px; 
  height: 100px;
}
/* Add a hover if you want */
a.ImgLink:hover {
  background: #FFFFFF url(imgHover.jpg); 
}

Answer 2

Make the link a block-level element, and give it a width and height:

a.somelink {
    display: block;
    width: 100px;
    height: 20px;
    background-image: url(someimage.png)
}

Or just use an <img /> inside the <a> instead of using a background-image.

Answer 3

A link should always have text, whether it is direct text content or the alt tag of an image. You can use a negative text-indent style to hide the text from view, replacing it with the image. Example:

<a href="page.html" id="important-link">check out my important stuff</a>

#important-link {
    background: transparent url(../images/important-stuff.png) no-repeat top left;
    display: block; /* needed as <a> tag is inline by default */
    height: 100px; /* whatever image width is */
    text-indent: -9999px; /* moves the text off the screen */
    width: 100px; /* whatever image height is */
}

This is a common technique for image replacement where specific fonts are needed, while preserving accessibility (mostly, CSS+no images is the only caveat) and SEO benefits from the text.

Answer 4

Best practice and SEO friendly CSS Text Replacement With Images:

http://css-tricks.com/css-image-replacement/

Answer 5

What about this:

<a href="#>&nbsp;</a>

then remove the possible underline with the following css:

a.somelink {
    display: block;
    text-decoration:none;
    background-image: url(someimage.png)
}