You'll probably have a better result if you make that into a border image, and use
border-image-repeat: round;
質問
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?
解決
You'll probably have a better result if you make that into a border image, and use
border-image-repeat: round;