XHTML anchor link with background image and no text

Question

Is it possible to have anchor links no text inside that has a background image and fixed dimensions and still be good for SEO?

Example CSS:

a{display:block;width:50px;height:20px;background-image:url('images/background.jpg');background-repeat:no-repeat;background-position:0 0;}

a:hover img{background-position:0 -20px;}

Example HTML:
<a href="#"></a>

Answer 1

If the image has text in it or you simply want to add its description, one thing you can do to help SEO and accessibility is to give the anchor a title and content with a large negative text-indent, like adding this to your a CSS:

display:block;
text-indent:-9999em;

...with the following HTML:

<a href="#" title="IMAGE TEXT">IMAGE TEXT</a>

Answer 2

Inspired by neXib's comment on another answer.

HTML:

<a href="/home" title="Homepage" class="home">
    <div><img src="/images/sprite.png" alt="Home" /></div>
</a>

CSS:

a {
    display: block;
}
.home div {
    width: 84px;
    height: 27px;
    overflow: hidden;
    position: relative;
}
.home div img {
    position: absolute;
    top: -65px;
    left: -20px;
}

So long as the div has 'overflow: hidden' and fixed dimensions the image inside can be positioned within to only display the part of the sprite you want.

SEO was a concern for me too and I think this solution will work fine.