How to use a graphic to link elsewhere in WordPress

I wanted to change a graphic image into a clickable link, on a Wordpress site (La Liga referee statistics )I've been developing and hosting for a Spanish colleague.

The first step was to enter the code for the text link on the page

<a href="http://www.losarbitroscuentan.com/index.php?page_id=8790" title="Los Arbitros Cuentan - Primera - Click!" id="test-logo">Primera Division</a>

You can see that the id is specified as "test-logo" The page_id (so you go to the correct link) is obtained within Wordpress editor, looking at the pages and pressing right-click, to copy the link location, and then pasting into Notepad - or merely view the URL in your browser.

Now to allocate that link-text to a graphic, we change the relevant css file. This is normally the style.css but this may change. Also, if you are using a theme, you will need the edit the css file in that theme's folder.

#test-logo {
background-image:url(/wp-content/uploads/2010/10/graphicname.jpg);
display:block;
height:37px;
width:190px;
}

So far so good, and clicking on the image will take you to your desired screen. Well, each time you save changes to a css file you should reload the webpage, so it replaces the css info in the cache with the updated data.
Looks promising, but the only problem now is we have both text and graphic conflicting with each other!
There is an awesome technique we can use in css/html - "text-indent" to take the text completely off the screen ie to hide the text

#test-logo {
background-image:url(/wp-content/uploads/2010/10/graphicname.jpg);
display:block;
height:37px;
text-indent:-9999px;
width:190px;
}

Pretty cool hey? Many thanks to this technical site for pointing me in the right direction to accomplish this!