Как использовать CSS-спрайт для повторяющегося фонового изображения?

Это то, с чем у меня были проблемы в прошлом, и я думаю об этом, поэтому я сделал простой пример изображения спрайта для тестирования и, надеюсь, получу ответы.

Если вы посмотрите мой код и демо здесь http://dabblet.com/gist/2263037

Вы увидите, что у меня есть простой элемент div, в котором используется фоновое изображение

Ниже этого элемента DIV у меня есть тот же элемент div, но на этот раз я пытаюсь Вместо изображения спрайта CSS

Итак, мой вопрос: можно ли воспроизвести внешний вид первого DIV, используя это изображение спрайта, или необходимо внести изменения в изображение спрайта?

Без изображения спрайта

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

С изображением спрайта

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

 
       
NOTICE: This is just a test notice, no reason to be alarmed
 







 
       
NOTICE: This is just a test notice, no reason to be alarmed