Sk-etchbook

So you want to use pretty graphics instead of the lovely selection of about six cross-browser fonts? BAD DOG! That will upset the spiders.

Now to make a search engine friendly graphical header it is pretty simple. Follow the previous instructions outlined in the Semantic HTML post the use CSS to replace the

Image/text replacement is used to enhance the visual appearance of a heading whilst the document information remains intact. There are various ways of doing this, all of them hacks so none of them are perfect. Main problems is support in IE5 (which is ancient anyway) and text not showing when users have images turned off. You also loose alt tags but you can add a title property to the tag if required.

This is how I learnt to do it:

<h1 id="logo">Company Name Here</h1>

/* css */
#logo {
height: 25px;
width: 200px;
text-indent: -9999px;
background: url(logo.png);
}

W3C Example: Image replacement used to enhance the visual appearance of a heading

In the following example, a decorative image is used to replace text within the heading element.

<style type="text/css">
h3#about {
width: 480px;
height: 34px;
position: relative;
}

h3#about span {
background: url(about.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
</style>
...
<h3 id="about" title="About example.com">
<span></span>About example.com </h3>

            

See here for plenty more examples:


http://www.mezzoblue.com/tests/revised-image-replacement/