dylan bathurst

Synopsis of Pure CSS Image Replacement Techniques

There isn’t a very wide selection of available fonts to use that will work across all browsers and machines when working on the web. There are however some cool CSS tricks help with this, and allow you to create just the right look for your site.

There are quite a few different types of image replacement out there. I want to focus on two specific ones in this post. The Phark method, and the Shea method. These are, in my eyes, the best two types of image replacement techniques to date. I have created my own technique for image replacement, but usually use Phark, or Shea just for shear ease of implementation.

The Phark Method

Being so easy to use, the Phark method is probably the most widely used method. It consist of one image, and one css property. So here we go:
Say you have a heading element such as an H2 that you want to use a non-standard font for. First what you would do is set up the heading just like you normally would do.

<h2>Image Replacement</h2>

The next step is to create the image that you will want to replace the text. Here is and example that I quickly created using photoshop:
Image Replacement

Set the width and height of the h2 element so that it will accommodate your image suitably.

h2 {height:67px;width:240px;}

Now add the image to the background of the heading tag, and also get rid of the currently overlaying text:

h2 {
background:url("img/image_replace.png") no-repeat left top
text-indent:-9999px;
height:67px;
width:240px;
}

Image Replacement

The text-indent property does the work of pushing (or pulling rather) the text off screen by giving it a negative indentation which is just a very large number beyond the width of most monitors. You might think that since the text is being pulled off the screen that far that the horizontal scroll bar will be able to scroll all 9999px’s to the text. This won’t happen, though, because your browser doesn’t respond to text-indentations.

Buuuuuut…

Of course with every problem there is a solution, and with every solution there is a but. If on the off chance that someone is browsing to your site with CSS turned on in the browser, but have images turned off. There will be a big blank spot where your crazy awesome picture once resided. This is taken car of with the Shea method.

With the Shea method all you need is one empty span tag placed in between the opening heading tag, and the actual heading word(s) as so:

<h2>Shea Method</h2>

Now all that is left to do is add the CSS.

h1 {
width:329px;
height:25px;
position:relative;
}
h1 span {
background:url(img/image_replace.png) no-repeat;
position:absolute;
width:100%;
height:100%;
}

What this does is overlays the span (with this image in it) on top of the h2 (with the text in it) hiding the text from view. So now if CSS is turned on but images off the user can still see underlying text. Tadaa!

Shea Method

Buuuuuut

Again another but?? They only problem with the Shea solution is that if the image being used for the heading has any transparency the underlying text will show through.

Shea Method

All in all there are a bunch of different methods for image replacement. None of them are perfect, but with a little compromise, I’m sure you’ll be able to find a method that will suit you well.