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

Answer 2

I think you have to put the sprite on it's own row in this case. This should work since your image is constrained vertically to a set height. At least that's what it looks like in the example.

Additionally the image would need to be the same width as the sprite. The reason the background image needs to extend the width of the sprite is because you are repeating across the x-axis and if there is blank space or another image to the left of your sprite, you will get something similar to your example.

In your example, the images in your sprite may not be a good fit with that background image since they are so wide. So it would be better if you selected other images that fit the size of that background image, probably more background images since usually you can use thinner images. See example below that I use on one of my websites.

And as msigman said, you can add repeat-x to make sure the background only repeats along the x-axis, but if you've constrained your div to a certain height and positioned the sprite correctly, the repeat-x may not matter, but it is safer.