Using the Padding-Top CSS Property for Image Replacement

Langridge’s image replacement method bases all of its “magic” on hiding the text of the target web page element by assigning a value of 0 to its “height” property. On the other hand, the background image is pushed down, back to the visible area, by adding a top padding that matches the dimensions of the image in question. It’s that simple, really.

If you’re like me, it’s very probable that this explanation sounds somewhat confusing, so let me show you the CSS code that puts Langridge’s approach in action with a single H1 element. Here it is:

#header h1 {

width: 400px;

height: 0;

padding-top: 200px;

background: url(h1.png) top left no-repeat;

overflow: hidden;

}

There you have it. As seen before, the proper combination of the “height” and “padding-top” CSS properties allows you to add a background image to a text-based HTML element, while the inner text is hidden from display. Of course, this approach suffers exactly the same accessibility issue as Rundle’s method, where the target selector becomes inaccessible if the assigned image is broken.

Still, the creative use of the aforementioned properties makes this method worth looking at, and in consequence, it should be taken into consideration when implementing an image replacement technique that requires no additional markup.

Here’s the background image used by the earlier CSS snippet, which has been also utilized with some examples developed in previous tutorials of this series:

All in all, now that you’ve grasped the logic driving Langridge’s image replacement technique, the next step is to bind the previous CSS styles to the markup of a web page. That’s exactly what I’ll be doing in the section to come, so please read the next few lines.