Question

Consider these simple CSS rules:

jsFiddle

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)?

Answer 1

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

Example fiddle