STYLE SHEETS

Using the Padding-Top CSS Property for Image Replacement

In this tenth part of the series, I show you how to start using the image replacement method created by Stuart Langridge. It uses the “padding-top” CSS property to mask the text of the targeted web page element while keeping its background image visible.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

December 10, 2009

TABLE OF CONTENTS:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>

</div>

<h2>Main content section</h2>

</div>

<h2>Footer section</h2>

</div>

</body>

</html>

That was easy to code and read, wasn’t it? Regardless of the trivial content displayed by this basic web page, the purpose of this example is simply to demonstrate how Langridge’s image replacement method can be used in a concrete situation.

And in case you still have some doubts regarding the inner workings of this method, here’s a screen capture that clearly depicts how the previous web document is displayed on screen:

With this final example, you learned yet another image replacement method that can be added to your toolbox. As always, feel free to edit all of the code samples shown in this tutorial, which hopefully will be educational and make it easier for you to implement this technique in real-world environments.

Final thoughts

That’s all for now. In this tenth episode of the series, I provided you with the right pointers to start using the image replacement method created by Stuart Langridge, which as you saw for yourself, uses the “padding-top” CSS property to mask the text of the targeted web page element while keeping its background image visible.

In the previous example, this method was applied only to a single H1 header of the page, but as I demonstrated with other techniques covered in previous parts of the series, it’s possible to style other selectors with the same ease.

Therefore, in the penultimate article I’ll be explaining how to implement Langridge’s approach with all of the H2 elements of an XHTML document, so you can see how flexible this method can actually be.

Here’s my final suggestion: don’t miss the next tutorial!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.