html - How to use a CSS sprite for a Repeating background image?

Question

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.

If you view my code and demo here http://dabblet.com/gist/2263037

You will see that I have a simple div that uses a background image

Below that DIV I have the same div but this time I attempt to use a CSS Sprite image instead

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?

Without Sprite image

/* 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;
}

With Sprite image

/* 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;
}

HTML

<div class="notice-wrap"> 
       <p><strong>NOTICE:</strong> This is just a test notice, no reason to be alarmed</p> 
</div>

<BR><BR><BR>

<div class="notice-wrap-sprite"> 
       <p><strong>NOTICE:</strong> This is just a test notice, no reason to be alarmed</p> 
</div>

Answer 1

Setting up the sprite

You can use an image sprite to do what you want. They can only repeat along one axis, i.e. repeat-x, but in your case that's all you need. Also your image within the sprite must run the entire width, this is how the browser knows to tile it.

The trick is your repeated background must extend across the FULL WIDTH of your sprite image. This is crucial. Here is your image, modified to meet that criterion:

Setting up the CSS

Now we just reference it as usual, and it will work fine:

/* 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-sprite3.png) repeat-x;
? ? background-position: 0 -52px;
}