CODEWITHSUNDEEP
javascriptjquerycss
ComFreek
ComFreek

Reputation: 29434

Hide partial background repeat

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

Upvotes: 1

Views: 616

Answers (4)

sabithpocker
sabithpocker

Reputation: 15566

This will work for percentage widths and auto adjusts on sreen resize.

$(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>

http://jsfiddle.net/upjkd/14/show

Upvotes: 2

Oriol
Oriol

Reputation: 288390

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

Upvotes: 0

Ed Heal
Ed Heal

Reputation: 60017

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?

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337620

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

Upvotes: 2

Related Questions