STYLE SHEETS

Image Replacement CSS Techniques

Image replacement is a useful approach for solving certain web design problems. In this first article of a series that examines this technique, we take a closer look at an image replacement approach that relies on assigning a large negative value to the “text-indent” CSS property to hide the text wrapped by a web page element, thus unmasking its background image.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

November 20, 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>

Done. Now, if you try out the previous example on your own browser, then you should see a web page that looks similar to this:

That’s pretty neat, right? Obviously, the text of the H1 element has been replaced by my beautifully-crafted background image (feel free to laugh at this point if you want to), thanks to the tricky use of the “text-indent” property. As with other IR approaches, the one discussed above has its pros and cons. The good thing is that the technique is extremely simple to implement, requires no additional markup and is decently supported by most screen readers.

On the other hand, though, if the background image isn’t loaded by the browser, the target element will remain empty. In the end, it’s up to you to decide when and how to use it.

Final thoughts

That’s all for the moment. In this introductory chapter of the series, I took a closer look at the first image replacement approach of the many available today, which relies on assigning a large negative value to the “text-indent” CSS property to hide the text wrapped by a web page element -- thus unmasking its background image.

As with other IR techniques that I plan to cover in subsequent tutorials, this approach has a drawback. If, for whatever reason, the background image fails to download, the element’s text will remain hidden from view, and inaccessible.

In this example, this technique was applied specifically to an H1 header, but it’s equally easy to use it with other web page elements. Based on this, in the next installment I’m going to show you how to apply the same IR approach simultaneously to H1 and H2 headers of a web document.

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.