I've used that trick many a time.
For the benefit of the OP (and anyone else who might find it useful) you can set a background image on a section of text (normally a heading) and then add a link to it.
Let's say you have the following HTML code:
-
<a href="homepage.html"><img src="images/yourlogo.gif" alt="Your Company Name" /></a>
-
Now, we all know that search engines prefers images over text, right? So we'd rather have a nice big <h1> in there with our company name so search engines find the text, but we still want to show off our fancy company logo that we spent thousands of dollars on a bunch of clever marketing and design guys to come up with.
-
<h1 class="logo"><a href="homepage.html">Your Company Name</a></h1>
-
So how do we get the logo in there in an invisible manner?
-
<style type="text/css">
-
<!--
-
h1.logo {background:url("images/yourlogo.gif") no-repeat top right;}
-
a {display:block; height:150px; width:300px; text-indent:-9999px;}
-
--></style>
-
What we've done is put the background image on the h1 tag, and set the link to be a block-level element. This means we can control it's height and width a bit better than an inline element.
So when you view your page with no CSS (as search engines do), they'll see a nice, big, H1 tag - great for getting the PageRank up for your company name. But when users with modern browsers view it, they'll get the eye-catching benefit of that oh-so-expensive logo.
codegecko
1
