title: How to use the new image replacement technique by Scott Kellum
body: <p>I am practicing using various image replacement methods and recently came across a couple articles discussing a new, supposedly more efficient method by Scott Kellum. </p>
  
  <p><a href="http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/" rel="nofollow">Original website article regarding this new method</a></p>
  
  <p>It seems good and I would like to practice using it, but am not to sure what the html and css for it should be. So in the example below, I have an h1, with the example logo text inside. Then I added a class of .hide-text to my h1 and styled it with CSS. I used a photoshop logo image I made and set that as the background image....the image has a width of 203px and a height of 57px.</p>
  
  <p><strong>Question 1:</strong>
  When I tested my code in the browser, everything seems to be working fine, however is my usage of Mr.Kellum's image replacement technique correct?</p>
  
  <p><strong>Question 2:</strong>
  Should I target the h1 in the css and declare the width and height or is it okay to include the width and height directly in the hide-text class like in my example below?</p>
  
  <pre><code>&lt;style&gt;
  .hide-text {
      background: url(images/mylogo.jpg) 0 0 no-repeat;
      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden;
      width: 203;
      height: 57px;
      }
  </code></pre>
  
  <p>
  </p>
  
  <pre><code>&lt;body&gt;
  &lt;h1 class="hide-text"&gt;MyLogo text&lt;/h1&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Any help is greatly appreciated. Thank you community!</p>