Consider these simple CSS rules:
div#container { width: 50%; height: 260px; background-image: url('Image.png'); background-repeat: repeat-x; } The problem is that I only want full images. If there is not enough space for another duplicate, it should NOT be shown.
I've never heard that CSS provides a rule for it. So how can I achieve it in JavaScript (jQuery already included)?
This is not possible with current CSS rules. You can repeat once, or repeat forever. The alternative is to shrink the size of the containing element to fit the nearest repeating point in either CSS (if you know the width before page load) or JS (if you don't).
Here's the latter implentation using jQuery:
var $container = $("#container"); var bgImg = extractUrl($container.css("background-image")); var $img = $("<img />", { "src" : bgImg }).hide().appendTo("body"); $container.width(nearest($("#container").width(), $img.width())); $img.remove(); function extractUrl(input) { // remove quotes and wrapping url() return input.replace(/"/g, "").replace(/url\(|\)$/ig, ""); } function nearest(n, v) { n = n / v; n = Math.floor(n) * v; return n; } 
$(window).on('load resize', function () { var img = $('<img/>'); img.attr('src', 'http://upload.wikimedia.org/wikipedia/commons/0/0c/Fussball.jpg').load(function () { var height = this.height; var width = this.width; var divWidth = $('#containerwrap').width(); var extra = divWidth % width; $('div#container').width(divWidth - extra); }); }); div#container { width: 670px; height: 260px; margin:0 auto; background: url('http://upload.wikimedia.org/wikipedia/commons/0/0c/Fussball.jpg') left center; background-repeat: repeat-x; } #containerwrap{ width:100%; height: 260px; background-color:#000000; } <div id="containerwrap"> <div id="container"> Test </div> </div> As the width is fixed by the server, and the server knows the size of the image - why not construct the image to be correct and forget the repeat, or make the width the appropriate size so it will fit whole number of images?
See http://jsfiddle.net/upjkd/10/
var img=document.createElement('img'); img.src="http://upload.wikimedia.org/wikipedia/commons/0/0c/Fussball.jpg"; document.body.appendChild(img); var con=document.getElementById('container'), numImages=Math.round(con.clientWidth/img.clientWidth); con.style.backgroundSize=con.clientWidth/numImages+'px'; document.body.removeChild(img); You can use Math.round(con.clientWidth/img.clientWidth) to determine the number of repetitions of the image, and then use con.style.backgroundSize=con.clientWidth/numImages+'px' to be sure that the number of images is an integrer (only full images).
