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

Try putting the background on the blocks instead of the page with fixed attachment and alignment of left top. Unfortunately with this option if the page scrolls the background appears fixed.

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

http://jsfiddle.net/bzCNb/28/