Masking/Clipping div

Question

How do I get div #1(page-title) to "cut" through div #2(mainwrap)and see the background-image?

Example:

<div class="body">
<div class="mainwrap">
<div class="page-title">
</div>
</div>
</div>

CSS:

body {background-image: url("/background.jpg");}
.mainwrap {background: #fff}
.page-title {background: none;}

Answer 1

You'll need to use either an bitmap image or an SVG to make your mask.

.mainwrap will need to have a mask applied. The mask will need to be black text (the hole) on a white background (white means keep).

See: http://www.html5rocks.com/en/tutorials/masking/adobe/