CSS: повторение фона

У меня есть эта скрипка

На моей веб-странице мой клиент хочет, чтобы блокнот смотрел на их контент, однако они также имеют полноразмерный дизайн.

То, что я хочу достичь, - это иметь ряд циклов в верхней части контейнера, но я не хочу, чтобы половина из них показывалась в конце, потому что это выглядело бы ужасно.

Так что в моей скрипке вторая строка просто:

HTML

<div id="note-top2" class="note-top"></div>

CSS

#note-top2 {
    background:url(http://i.imgur.com/8hc1eSh.png) repeat-x;
}
.note-top {
    width:100%;
    height:38px;
    text-align:center;
}

Это быстро загружается, но у нас есть полупериоды в конце.

Поэтому я попытался использовать jQuery для "взлома":

HTML

<div id="note-top" class="note-top"></div>

<img id="loop" src="http://i.imgur.com/8hc1eSh.png" alt="" />

CSS

.note-top {
    width:100%;
    height:38px;
    text-align:center;
}
#loop {
    display:none;
}

JS

function checkNoteWidth(start) {
    var el = $('#note-top');
    var loop = $('#loop');
    var elw = el.width();
    var loopw = loop.width();
    var imgCount = Math.floor(elw/loopw);
    if (start) {
        el.html('');
        for (var i=0;i<imgCount;i++) {
            el.append(loop.clone().attr('id','').addClass('loopimg'));      
        }
    } else {
        if (imgCount > $('.loopimg').length) { //if we need more images
            for (var i=0;i<(imgCount-$('.loopimg').length);i++) {
                el.append(loop.clone().attr('id','').addClass('loopimg'));      
            }
        } else if (imgCount < $('.loopimg').length) { //if we have too many images
            for (var i=0;i<($('.loopimg').length-imgCount);i++) {
                $('.loopimg').eq(i).remove();      
            }
        }
    }
}

checkNoteWidth(true)
$(window).resize(function() {
    checkNoteWidth(false);
});

Однако, если вы быстро измените размер с помощью этого или нажмите max/minim в браузере, он не работает должным образом (слишком много или недостаточно, в зависимости от того, как вы пойдете).

Есть ли у кого-нибудь идеи или предложения для лучшего метода? Какой-то способ показать фоновое изображение только после 10px?