Goodbye -9999px: A New CSS Image Replacement Technique

The -9999px image replacement technique has been popular for the best part of a decade. To replace a text element with an image, you use the following code:

<h1>This Text is Replaced</h1>

<style>
h1
{
	background: url("myimage") 0 0 no-repeat;
	text-indent: -9999px;
}
</style>

The element’s background is displayed and it’s text is moved off-screen so it doesn’t get in the way. Simple and effective. It was often adopted to show graphical titles — that’s rarely necessary now we have webfonts, but you’ll still find it used all over the web.

Until now.

A new technique has been discovered by Scott Kellum and promoted at Zeldman.com:

#replace
{
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

The code indents the text beyond the width of its container but it won’t wrap and the overflow is hidden.

While it’s a little longer and more difficult to remember, performance can be improved because the browser’s no longer drawing a 9,999px box behind the scenes. It will also prevent the weird left-extended outlines you’ll see around links using hidden text.

I haven’t been able to discover any downsides — only than I wish I’d discovered it first. Have you adopted the technique? Have you experienced any issues?

And if you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like HTML5 & CSS3 For the Real World.

Comments on this article are closed. Have a question about CSS? Why not ask it on our forums?