一张背景图片，多个 Div

Question

I am going to explain my question with a series of images.

A div container will have the following background image:

On top of the image, there will be tile like divs:

My goal is to make the background image visible to only the tiles, and the rest hidden:

Any help is greatly appreciated, thank you!

Answer 1

Use the background-attachment attribute like in the following fiddle:

http://jsfiddle.net/1ovd3cnk/1/

each image block gets the following:

background-image: url(http://i.stack.imgur.com/fOV15.png);
background-attachment: fixed;

edit: was setting margin on row instead of conatiner

Answer 2

Sorry reply like this, I don't have reputation enough to add comment in other comments, but making some adds to the earlier answer:

The image shifted could be fixed using:

background-size: cover;

But remember that cover property isn't supported in old browsers. http://caniuse.com/#search=background-size

So if you want cross old browser compatibility I recommend you to try javascript and do some maths using the width and height from your elements to adjust de background image position.