CSS: Background repeat increment

Question

I have this fiddle

On my webpage my client wants to have a notepad look to their content, however they also have a full width responsive design.

What I want to achieve is to have a row of loops at the top of the container, but I don't want half of one showing at the end because that would look awful.

So in my fiddle, the second row is simply:

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

This loads quickly, but we have the half loops at the end.

So I've tried using jQuery to "hack" it:

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

However if you resize quickly using this or click max/minimise on the browser, it doesn't work properly (too many or not enough depending on which way you go).

Does anyone have any ideas or suggestions for a better method? Some way of telling the background image to only repeat after 10px?

Answer 1

You'll probably have a better result if you make that into a border image, and use

border-image-repeat: round;

http://css-tricks.com/understanding-border-image/