Way to divide a single background image across multiple divs to create “windowed” effect?

Question

I was wondering if there is an easy way to \"tile\" or \"window\" a single background image across multiple divs. I want to create a sort of punched out window look.

Ke

Answer 1

I came into something that's nearly a 100%. Feel free (anyone) to edit the answer.

CSS

#blocks {
    width:100%;
    height:100px;
}
.block {
    float: left;
    overflow: hidden;
    margin: 2%;
    width: 20%;
    height: 100%;
    background: transparent url(http://www.designmyprofile.com/images/graphics/backgrounds/background0172.jpg) no-repeat top left;
}

jQuery (JS)

$(function () {
    var posX = 0;
    var posY = 0;
    var i = 0;

    $(".block").each(function (ind, el) {
        $(this).css("background-position", posX.toString() + "% " + posY.toString() + "%");

        posX += 20;
        i++;

        if (i == 4) {
            i = 0;
            posX = 0;
            posY += 25;
        }
    });
});

Demo (to be improved): http://jsfiddle.net/bzCNb/33/