Using a div as a clipping mask in css

Question

I have a background image that has background-size:cover; applied to it and then a series of divs overlaid which I would like to become individual clipping masks.

I've looked at the feature clip: rect(20px, 20px, 20px, 20px,); however as the divs are brought in through a CMS system, it will be inappropriate to define set sizes.

Is there a way of setting the div with a clipping mask property so that it clips the image anywhere the div is placed on the page?

I don't particularly want to use an image overlay either as this site will be responsive.

Answer 1

The clip-path CSS property can be applied to all HTML elements, SVG graphic elements and SVG container elements:
http://www.html5rocks.com/en/tutorials/masking/adobe/