HTML and CSS Reference
In-Depth Information
Image Replacement
If you want complete typographic control over the appearance of your headers, there is no
substitute for type embedded in an image (usually created with a graphics package such as
Adobe Photoshop or Adobe Illustrator). However, using img elements in (X)HTML source
instead of semantic elements like h1 and h2 that properly indicate what the text is would be ill
advised. Doing so makes your page less accessible, as those who cannot see images (either
because they're browsing with images turned off in their browser or because they are vision-
impaired and visiting your site with a screen-reading device) will not be able to read your
headers. It also hinders your search engine results, as search engine crawlers place greater
importance on keywords found in header tags than in other elements or attributes.
So, back in 2003, a clever fellow by the name of Todd Fahrner developed a way to use CSS to
effectively replace text in a header element (or technically, any element, although this is most
commonly applied to headers) with an image (which typically contains the same text). Fahrner's
original technique, which came to be known as Fahrner Image Replacement (FIR), is no longer
recommended for use, but it spawned other creative minds to develop similar techniques that
are now widely use.
Leahy/Langridge Image Replacement (LIR)
At similar times but independent from each another, Stuart Langridge (
code/browser/lir/ ) and Seamus Leahy (
image-replacement/ ) developed a technique for image replacement that remains quite popu-
lar today. It works by taking a heading with an id like this:
<h1 id="replaced">This text will be replaced with our image</h1>
and applying some CSS to it as follows:
h1#replaced {
padding-top: 55px; /* height of the replacement image */
height: 0;
overflow: hidden;
background-image: url("replacement_image.jpg");
background-repeat: no-repeat;
What this does is set the height of our header to 0, but with a top padding the same size as the
image we intend to use for the header. Then, we set the background image of the header element
to our replacement image and tell it to not repeat. Because of the top padding, the (X)HTML/CSS
text is displayed below the image—actually outside the dimensions of the header element's
box. By setting the overflow property to hidden , we instruct the user agent not to show any-
thing outside the element's box, leaving us with only our background image showing.
The beauty of this method is that the (X)HTML is semantic, accessible, and clean. This
holds to the philosophy of keeping images that are of a decorative nature in CSS (those that
are of a contextual nature can still be in the (X)HTML, of course).
Rundle Image Replacement
Web designer Mike Rundle ( )
developed yet another technique, and it may be the simplest of all. Mike simply shifts the
Search WWH ::

Custom Search