Show background image through overlapping divs in HTML & CSS

Question

Could anyone tell me if the scenario below would be achievable with HTML and CSS? My goal is to show the background-image of my HTML body through a clipped div.

Please bear in mind that the final website would be responsive (mobile-first), so the solution should allow the different positioning of the body background images upon resizing.

Basically: is there anyway to show a div as a cutout of the underlying div?

I thought about providing separate background images for each circle to show the illusion that the circles show the body background, but as the design is responsive, alignment issues would quickly occur.

Any insights? Please let me know if more data is necessary. Thanks in advance.

Answer 1

I think this is similar:

http://ask.webatall.com/html5/7619_transparent-half-circle-cut-out-of-a-div.html

and should help? Instead of the shape you'd have to use circles, but the principle should be the same. Also, if it doesn't work a combination of 2 elements with half circles cut out could achieve the effect.

This answer does a similar thing with another shape:

http://www.samhohce.net/questions/30259780/onhover-button-cut-out-a-triangle-and-show-background