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

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.

#background-container { 
    display:table;
    width:100%;
    border-collapse:collapse;
    box-sizing:border-box;
     /**/
    background: url(path-to-background-image) no-repeat center center;
    background-size: cover;
     /* Vendor specific hacks */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.blocks {
    display:table-row;
}

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

See jsFiddle Demo