If you aren’t familiar with the CSS jargon “image replacement”, it is essentially a way to replace an
h1 heading—or other text-based content—with an image or company logo. This way you can have a fancy graphic instead of plain text, and maintain accessibility and SEO benefits.
The goal of image replacement techniques is to be compatible with the most possible browser (user agent) configurations and to be accessible. This means we want to support browsers with a 1% or greater market share in various configurations (e.g. CSS on/off, images on/off), as well as screen readers and other assistive technologies.
My personal preference for image replacement involves using an
a (anchor tag) inside an
h1 or other block element. It is called the “LLJ” method, and it should work on all major browsers, including IE6+.
Below is the HTML/CSS to implement this technique. It’s also hosted on jsfiddle.
1 2 3
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15