Using the Padding-Top CSS Property for Image Replacement

For many beginning web designers, the purpose of most image replacement methods available today may seem understandably pointless. Having at their disposal a powerful combination of client-side technologies that permits them to easily build the structure of web pages, then define their visual presentation via CSS, and finally add to them a dynamic, high-responsive behavior with JavaScript, it’s natural to see the implementation of any of these methods as an annoying, tricky process that should be avoided by all means, whenever possible.

Fortunately, this is only a first impression that vanishes quickly in favor of a more mature opinion. The faster you realize the importance of image replacement in professional web design, the better. Without the existence of these methods, designers would have to live in a limited world where polishing the appearance of any text-based HTML element would imply altering its semantic meaning in all sorts of cruel ways.

This may sound a bit exaggerated, but reality tells a different story, trust me. For instance, how can an H1 element house a logo image, without modifying the markup or inserting the image directly via an <img> tag? Of course, this is merely an example, but the truth is that image replacement can be used in multiple cases and scenarios with very good results.

To demonstrate how useful image replacement can actually be, in previous chapters of this series I covered in depth the methods created by Mike Rundle and Todd Fahrner, which make decorating text-based HTML elements with a background image a no-brainer process. While these methods are quite possibly the most used at this time, there’s yet another handy approach developed by Stuart Langridge (http://www.kryogenix.org/code/browser/lir/) that bases its functionality on the “padding-top” CSS property.

So, in the next few lines I’ll be showing how to implement Langridge’s image replacement method, so you can understand its underlying logic and use it within your own web pages. Now, let’s get started!