---
title: "Modern Approach To CSS Image Replacement · Appnovation"
url: "https://www.appnovation.com/insights/modern-approach-css-image-replacement"
description: "The evolution of CSS image replacement techniques since 2003, and the modern approach that keeps text accessible and SEO-friendly."
---
Article
# Modern Approach To CSS Image Replacement
[ Appno Blogger Appnovation Coop](/people/appno-blogger.md) Sep 15, 2014
3 min read
Since 2003, front-end developers have come up with different techniques for replacing text with images.
The objective was to be able to display, for example, a title with a special font that differs from the default ones used in browsers, all by conserving the semantic HTML. An image of the text needed to be created with the desired font. It was then displayed as a background image and hid the HTML text. Thus, the desired look was achieved and kept the accessibility to the text in the webpage.
Here is a CSS example from early 2000’s:
.show-image { width: 40px; height: 40px; background: url(../images/my-title-image.png); } .hide-text { text-indent: -9999px; } \Hide this text please!\
However, the problem with this method is that the browser is required to render a large box off-screen which can cause a performance hit resulting in an animation bug on iPad1.
Fortunately in 2012, [Scott Kellum (opens in new window)](http://scottkellum.com/) of VOX Media came out with a new, innovative approach to getting rid of the -9999px “shift-offscreen” CSS hack!
Here is the solution:
.show-image { width: 40px; height: 40px; background: url(../images/my-title-image.png); } .hide-text { text-indent: 100%; \[ get out of the window \] white-space: nowrap; \[ don't come back in \] overflow: hidden; \[ no really, don't come back in \] } \Hide this text better!\
So, what are the benefits?
Firstly, we are no longer rendering an enormous 9999px box that never gets used anyway; This results in a dramatic performance improvement with less elements being added to the page. We also optimized our CSS while improving the mobile experience, especially on older devices.
So from now on, I don’t want to see your 9999px text indents, and you can approach your text replacements with class!
For further reading, follow up with these related links:
[css image replacement museum (opens in new window)](http://css-tricks.com/examples/ImageReplacement/)
[zeldman.com (opens in new window)](http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/)
[css architectures (opens in new window)](http://www.sitepoint.com/series/css-architectures/)
[ Appno Blogger Appnovation Coop · Appnovation](/people/appno-blogger.md)
## Keep reading
[](/insights/what-is-open-source-sovereign-ai.md)
Article · 7 min AI
### [What Is Open Source, Sovereign AI?](/insights/what-is-open-source-sovereign-ai.md)
Every company is encouraging more AI, and almost every AI bill is climbing. Sovereign AI is about two kinds of control: over your data and over your costs. Here's why open source sits at its foundation.
[Iain MacNeil](/people/iain-macneil.md) Article
[](/insights/how-build-ai-first-experience-without-throwing-out-everything-youve-already-built.md)
Article · 6 min AI Sep 10, 2026
### [How to Build an AI-First Experience Without Throwing Out Everything You've Already Built](/insights/how-build-ai-first-experience-without-throwing-out-everything-youve-already-built.md)
Users now expect a direct answer, not a list of links to click through. Here's how organizations can layer an AI-First experience onto their existing website or app, in weeks rather than years.
[Andrew Douglas](/people/andrew-douglas.md) Article
[](/insights/what-becomes-possible-when-ai-can-read-all-data.md)
Article · 4 min AI Sep 09, 2026
### [What Becomes Possible When AI Can Read All the Data](/insights/what-becomes-possible-when-ai-can-read-all-data.md)
Most of the world's data has never been analyzed, only sampled. AI changes that. How AI-ready data platforms unlock questions no one could ask before.
[Appnovation](/people/appnovation.md) Article
## Get the thinking,
*before everyone else.*
One considered email a month. New essays, field notes from live engagements, and the occasional strong opinion. No noise.