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.

Keep in mind that I want to dynamically add these boxes. There will be a maximum of 16, but I could have 9.

I have a fiddle here: link to fiddle

What I want to do is instead of the background image showing, it would just be white.. And instead of the divs being white, they contain that section of the background image. Sorry if this is not a very good description, but basically I want to swap the white with the background.

so something like:

<div id="blocks">
  <div class="block" style=" background: some-section-of-image ;"></div>
  <div class="block" style=" background: some-section-of-image2;"></div>
  <div class="block" style=" background: some-section-of-image3;"></div>
  <div class="block" style=" background: some-section-of-image4;"></div>
</div>

I'd like to do this with as little jQuery as possible... but maybe that is not feasible.

I fiddled around some with setting

opacity:0.0;

on just the blocks, but can't figure out how to not display the image elsewhere. Thanks!

Answer 1

A CSS-only solution

What you are describing is basically a table with a background image and white borders. A simple solution can be achieved by creating a table-like layout with CSS only.

.blocks {
    display:table-row;
}

.block {
    display:table-cell;
    height:100px;
    border:15px solid #FFF;
}

#background-container { 
    display:table;
    width:100%;
    border-collapse:collapse;
    box-sizing:border-box;
    background: url(https://i.imgur.com/2IqWvm5.jpeg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

<div id="background-container">
    <div class="blocks">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>        
    <div class="blocks">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
    <div class="blocks">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
    <div class="blocks">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
</div>

Answer 2

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/