text-indent Minus 9999

To show a logo but keep the real text for search engines, you printed the words and then shoved them nine thousand pixels off the left of the screen.

In 2026: Still works. The heading below carries real text, a background image, and text-indent: -9999px, so a visitor sees the graphic and a screen reader or search engine still reads the words. Whether that was clever or a dirty trick started a standards argument that ran for years. Modern code uses a clip instead, but this still renders exactly as intended.

Where it came from: The Phark image replacement method, Mike Rundle, 2003, refining the earlier Fahrner technique. Debated on webdesign lists for years. MDN ↗

<style>
h2.logo {
  width: 360px; height: 60px;
  background: url(https://xbawx.com/inc/img/demo/header_mysite.png) no-repeat;
  text-indent: -9999px;      /* the words leave the screen, the meaning stays */
  overflow: hidden;
  margin: 0;
}
</style>

<h2 class="logo">My Cool Site</h2>
<p>You see a graphic. A search engine still reads the words "My Cool Site".</p>