First of all, take a bit to read this great article on CSS Tricks called: Nine Techniques for CSS Image Replacement. It’s far more comprehensive than this post will be, and should be a good starting point for you to choose which Image Replacement technique will work best for you.

With that said, I usually use Technique #3, credited to Mike Rundle (aka. the Phark Method.). Here’s their Mark-up as applies to an h1 with class=”technique-three” with text in it:

h1.technique-three {
width: 350px; height: 75px;
background: url("images/header-image.jpg");
text-indent: -9999px;
}


For whatever reason, occasionally I get horizontal scroll-bars in Safari. To deal with this I simply added:


h1.technique-three {
width: 350px; height: 75px;
background: url("images/header-image.jpg");
text-indent: -9999px;

overflow:hidden;
letter-spacing:-1000em;
}

The letter-spacing was just thrown in there for good measure really. Either way, this seems to fix the issue. For sure, do your own experimenting as I cannot gaurantee this won’t screw anything else up.

I created a CSS Code Snippet in TextMate with a tab trigger ‘ir‘ – that simply throws in the 3 lines of CSS because I use this just infrequently enough to forget it.

Good luck, and feel free to leave any comments, thoughts, or concerns relating to this issue!

Now, go code.