title: How to replace inline text with images using CSS
body: <p>I'd like to replace the text (<em>"Word 1 Word2 Word3 Word4"</em>) in the following HTML with images, using CSS. I'd like the images to appear in-line horizontally too, as the text would. </p>
  
  <pre><code>&lt;div id="aSentence"&gt;
      &lt;p&gt;
          &lt;span id="word1"&gt;Word1&amp;nbsp &lt;/span&gt;
          &lt;span id="word2"&gt;Word2&amp;nbsp &lt;/span&gt;
          &lt;span id="word3"&gt;Word3&amp;nbsp &lt;/span&gt;
          &lt;span id="word4"&gt;Word4&amp;nbsp &lt;/span&gt;
      &lt;/p&gt;                    
  &lt;/div&gt;
  </code></pre>
  
  <p>I've read through and tried a couple of the techniques from <a href="http://www.mezzoblue.com/tests/revised-image-replacement/" rel="nofollow noreferrer">mezzoblue</a> and some other sites, but I'm coming to the conclusion that those techniques seem to require that the text's span is surrounded by a  or another element type that will make the words not line up horizontally.  </p>
  
  <p>Any ideas on how I can achieve this goal?  I'd like to (if possible) make the solution 'accessible' to screenreaders etc.</p>
  
  <p>Thanks very much,<br>
  Prembo.</p>
  
  <p>PS: I tried to implement some of the techniques - none of them worked properly:
  TextReplacement.html</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /&gt;
          &lt;title&gt;Text Replacement by Image using CSS&lt;/title&gt;
          &lt;style type="text/css" title="currentStyle" media="screen"&gt;
              @import "TextReplacement.css";
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body id="bodyId"&gt;
          &lt;div id="centerContainer"&gt;
              &lt;h1&gt;&lt;span&gt;Comparison of Various Techniques&lt;/span&gt;&lt;/h1&gt;
              &lt;p class="noteText"&gt;(NOTE: only text "Word1" is being replaced by image)&lt;/p&gt;
              &lt;div id="mainBodyContainer"&gt;
                  &lt;div class="techniqueContainer"&gt;
                      &lt;h2&gt;Technique 1: FIR&lt;/h2&gt;
                      &lt;ul id="t1List"&gt;
                          &lt;li id="t1w1"&gt;&lt;span&gt;Word1.&amp;nbsp;&lt;/span&gt;&lt;/li&gt;
                          &lt;li id="t1w2"&gt;&lt;span&gt;Word2.&amp;nbsp; &lt;/span&gt;&lt;/li&gt;
                          &lt;li id="t1w3"&gt;&lt;span&gt;Word3.&amp;nbsp; &lt;/span&gt;&lt;/li&gt;
                          &lt;li id="t1w4"&gt;&lt;span&gt;Word4.&amp;nbsp; &lt;/span&gt;&lt;/li&gt;
                      &lt;/ul&gt;                    
                      &lt;p class="techniqueComment"&gt;Word 1 and corresponding image disappear completely.&lt;/p&gt;
                  &lt;/div&gt;
  
                  &lt;div class="techniqueContainer"&gt;
                      &lt;h2&gt;Technique 2: Radu&lt;/h2&gt;
                      &lt;ul id="t2List"&gt;
                          &lt;li id="t2w1"&gt;&lt;span&gt;Word1.&amp;nbsp;&lt;/span&gt;&lt;/li&gt;
                          &lt;li id="t2w2"&gt;&lt;span&gt;Word2.&amp;nbsp; &lt;/span&gt;&lt;/li&gt;
                          &lt;li id="t2w3"&gt;&lt;span&gt;Word3.&amp;nbsp; &lt;/span&gt;&lt;/li&gt;
                          &lt;li id="t2w4"&gt;&lt;span&gt;Word4.&amp;nbsp; &lt;/span&gt;&lt;/li&gt;
                      &lt;/ul&gt;                    
                      &lt;p class="techniqueComment"&gt;All disapppear completely.&lt;/p&gt;
                  &lt;/div&gt;                
  
                  &lt;div class="techniqueContainer"&gt;
                      &lt;h2&gt;Technique 3: Rundle&lt;/h2&gt;
                      &lt;ul id="t3List"&gt;
                          &lt;li id="t3w1"&gt;&lt;span&gt;Word1.&amp;nbsp;&lt;/span&gt;&lt;/li&gt;
                          &lt;li id="t3w2"&gt;&lt;span&gt;Word2.&amp;nbsp; &lt;/span&gt;&lt;/li&gt;
                          &lt;li id="t3w3"&gt;&lt;span&gt;Word3.&amp;nbsp; &lt;/span&gt;&lt;/li&gt;
                          &lt;li id="t3w4"&gt;&lt;span&gt;Word4.&amp;nbsp; &lt;/span&gt;&lt;/li&gt;
                      &lt;/ul&gt;                    
                      &lt;p class="techniqueComment"&gt;No effect - image and text visible.&lt;/p&gt;
                  &lt;/div&gt;    
  
                  &lt;div class="techniqueContainer"&gt;
                      &lt;h2&gt;Technique 4: Leahy/Langridge&lt;/h2&gt;
                      &lt;ul id="t4List"&gt;
                          &lt;li id="t4w1"&gt;&lt;span&gt;Word1.&amp;nbsp;&lt;/span&gt;&lt;/li&gt;
                          &lt;li id="t4w2"&gt;&lt;span&gt;Word2.&amp;nbsp; &lt;/span&gt;&lt;/li&gt;
                          &lt;li id="t4w3"&gt;&lt;span&gt;Word3.&amp;nbsp; &lt;/span&gt;&lt;/li&gt;
                          &lt;li id="t4w4"&gt;&lt;span&gt;Word4.&amp;nbsp; &lt;/span&gt;&lt;/li&gt;
                      &lt;/ul&gt;                    
                      &lt;p class="techniqueComment"&gt;Image appears above Word1.&lt;/p&gt;
                  &lt;/div&gt;    
  
                  &lt;div class="techniqueContainer"&gt;
                      &lt;h2&gt;Technique 5: Dwyer&lt;/h2&gt;
                      &lt;ul id="t5List"&gt;
                          &lt;li id="t5w1"&gt;&lt;span&gt;Word1.&amp;nbsp;&lt;/span&gt;&lt;/li&gt;
                          &lt;li id="t5w2"&gt;&lt;span&gt;Word2.&amp;nbsp; &lt;/span&gt;&lt;/li&gt;
                          &lt;li id="t5w3"&gt;&lt;span&gt;Word3.&amp;nbsp; &lt;/span&gt;&lt;/li&gt;
                          &lt;li id="t5w4"&gt;&lt;span&gt;Word4.&amp;nbsp; &lt;/span&gt;&lt;/li&gt;
                      &lt;/ul&gt;                    
                      &lt;p class="techniqueComment"&gt;Word 1 and corresponding image disappear completely.  Same as Technique 1.&lt;/p&gt;
                  &lt;/div&gt;                        
                  &lt;div class="techniqueContainer"&gt;
                      &lt;h2&gt;Technique 6: Jason&lt;/h2&gt;
                      &lt;div id="t6List" class="borderContainer"&gt;
                          &lt;span id="t6w1"&gt;Word1.&amp;nbsp; &lt;/span&gt;
                          &lt;span id="t6w2"&gt;Word2.&amp;nbsp; &lt;/span&gt;
                          &lt;span id="t6w3"&gt;Word3.&amp;nbsp; &lt;/span&gt;
                          &lt;span id="t6w4"&gt;Word4.&amp;nbsp; &lt;/span&gt;
                      &lt;/div&gt;                    
                      &lt;p class="techniqueComment"&gt;Same as Technique 3 - Rundle.&lt;/p&gt;
                  &lt;/div&gt;     
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And the CSS File: TextReplacement.css</p>
  
  <pre><code>* {
      margin: 0;
      padding: 0;
  }
  
  body {
      margin: 0;
      padding: 0; 
      font-family: verdana, "trebuchet MS", helvetica, sans-serif; 
  }
  
  #centerContainer {
      margin-left: auto;     /* centres container */
      margin-right: auto; /* centres container */ 
      margin-top: 18px;
  }
  
  #mainBodyContainer {
      width: 900px;
      margin-left: auto; 
      margin-right: auto; 
      margin-bottom: 20px;
      font-size: 1.8em;
      font-weight: bold;    
  }
  
  #mainBodyContainer h2{
      font-size: 1.2em;
      font-weight: bold;    
      font-style: italic;    
      color: green;
  }
  
  div.techniqueContainer{
      text-align: center;
      margin-bottom: 30px;    
  }
  
  p.techniqueComment{
      font-size: 0.5em;
      font-weight: normal;    
      font-style: italic;    
      color: red;
  }
  
  p.noteText{
      font-size: 1em;
      font-weight: normal;    
      font-style: italic;    
      color: blue;
  }
  
  #mainBodyContainer ul{
      list-style: none;
      border: 1px solid #820000;
  }
  
  #mainBodyContainer ul li{
      display: inline;
  }
  
  /* TECHNIQUE 1: FIR */
  li#t1w1 {
      width: 250px;
      height: 61px;
      background-image: url(http://stackoverflow.com/content/img/so/logo.png);
  }
  
  li#t1w1 span {
      display: none;
  }
  
  /* TECHNIQUE 2: Radu */
  li#t2w1 {
      width: 2250px;
      height: 61px;
      background: url(http://stackoverflow.com/content/img/so/logo.png) top right;
      margin: 0 0 0 -2000px;
  }
  
  /* TECHNIQUE 3: Rundle */
  li#t3w1 {
      width: 250px;
      height: 61px;
      background: url(http://stackoverflow.com/content/img/so/logo.png);
      text-indent: -9999px;
  }
  
  /*TECHNIQUE 4: Leahy/Langridge. */
  li#t4w1 {
      width: 250px;
      padding: 61px 0 0 0;
      height: 0;
      background: url(http://stackoverflow.com/content/img/so/logo.png) no-repeat;
      overflow: hidden;
  }
  
  /*TECHNIQUE 5: Dwyer. */
  #t5{
  
  }
  
  #t5List{
      list-style: none;
      border: 1px solid #820000;
  }
  
  #t5List li{
      display: inline;
  }
  
  li#t5w1 {
  width: 250px;
      height: 61px;
      background-image: url(http://stackoverflow.com/content/img/so/logo.png);
  }
  
  li#t5w1 span{
      display: block;
      width: 0;
      height: 0;
      overflow: hidden;
  }
  
  /* TECHNIQUE 6: Jason */
  li#t6w1 {
  
  }
  
  #t6w1{
      text-indent: -5000px; 
      background: url(http://stackoverflow.com/content/img/so/logo.png) no-repeat 0 0; 
      overflow: hidden;
  }
  </code></pre>