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.

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