By Craig Buckler

Goodbye -9999px: A New CSS Image Replacement Technique

By Craig Buckler

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>

	background: url("myimage") 0 0 no-repeat;
	text-indent: -9999px;

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

	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?

The most important and interesting stories in tech. Straight to your inbox, daily. Get Versioning.
Login or Create Account to Comment
Login Create Account