Q:

Hide background from lower div on top div

I cant quite find a way to do this or even if its possible:
<body> has a background image
<div parent> has a background image
<div child></div>  has no background 
</div>

I want the child div to hide the parent div background but show the body background.

A:

http://jsfiddle.net/WM9Za/9/
You can use clip-path to cut out a rectangle, as shown in my fiddle.
You will be able to see the background image through that.
-webkit-clip-path: polygon(
    0 0,
    100px 0,
    100px 75px,
    75px 75px,
    75px 125px,
    125px 125px,
    125px 75px,
    100px 75px,
    100px 0,
    200px 0,
    200px 200px,
    0 200px,
    0 0
);

The upside to this method is that you don't have to add another background-image to the child and don't have to worry about positioning.

