title: How to use a CSS sprite for a Repeating background image?
body: <p>This is something that I have had trouble with in the past and it's on my mind so I made a simple example sprite image to test and hopefully get some answers  with.</p>
  
  <p>If you view my code and demo here
  <a href="http://dabblet.com/gist/2263037" rel="noreferrer">http://dabblet.com/gist/2263037</a>  </p>
  
  <p>You will see that I have a simple div that uses a background image</p>
  
  <p>Below that DIV I have the same div but this time I attempt to use a CSS Sprite image instead</p>
  
  <p>So my question, is it possible to replicate the look of the first DIV using this sprite image or are changes needed on the sprite image?</p>
  
  <p>Without Sprite image  </p>
  
  <pre><code>/* Notice wrapper with Single Image */
  .notice-wrap {
      margin-top: 10px; padding: 0 .7em;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      border-radius: 4px;
      border: 1px solid #CD0A0A;
      background: #B81900 url(http://www.getklok.com/css/ui-lightness/images/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat;
  }
  </code></pre>
  
  <p>With Sprite image  </p>
  
  <pre><code>/* Notice wrapper with SPRITE Image */
  .notice-wrap-sprite {
      margin-top: 10px; padding: 0 .7em;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      border-radius: 4px;
      border: 1px solid #CD0A0A;
      background: #fff url(http://f.cl.ly/items/2P1u2S1a132R0B3d2s08/test-sprite.png) repeat;
      background-position: 0 -52px;
  }
  </code></pre>
  
  <p>HTML  </p>
  
  <pre><code>&lt;div class="notice-wrap"&gt; 
         &lt;p&gt;&lt;strong&gt;NOTICE:&lt;/strong&gt; This is just a test notice, no reason to be alarmed&lt;/p&gt; 
  &lt;/div&gt;
  
  &lt;BR&gt;&lt;BR&gt;&lt;BR&gt;
  
  &lt;div class="notice-wrap-sprite"&gt; 
         &lt;p&gt;&lt;strong&gt;NOTICE:&lt;/strong&gt; This is just a test notice, no reason to be alarmed&lt;/p&gt; 
  &lt;/div&gt;
  </code></pre>