CSS - "knock-out" / see-through effect on background images

css, html

Solution

I think the idea here is that the image must be large enough to cover the webpage or at least the parent div..

Then you can apply the image to the background of both the container and the 'inner'div.

The overlay can be achieved by way of a pseudo-element rather than a separate div.

Revised structure -

.bck {
    position: relative;
    height: 800px;
    width: 100%;
    background:url(http://webneel.com/wallpaper/sites/default/files/images/08-2013/23-3d-beach-sand-wallpaper.jpg);
    background-repeat: no-repeat;
    background-position: center center;
}
.bck::before {
    content:'';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left:0;
    background:url(https://s3.amazonaws.com/f.cl.ly/items/2W0c3z1z2z3w3A2b0j2w/bck.png);
}
.box {
    border: 10px solid white;
    padding: 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: red;
    font-size: 30px;
    background:url(http://webneel.com/wallpaper/sites/default/files/images/08-2013/23-3d-beach-sand-wallpaper.jpg);
    background-position: center center;
}

<div class="bck">
    <div class="box">
        <p>Text goes here</p>
    </div>
</div>

Problem

I'm trying to achieve the following - an element with a background image, a pattern over the top of the background image, and a box on top of both that "knocks-out" the pattern but still shows the background image. Here's an image showing the desired effect: As you can see the pattern does not show under the top box, but you can still see the background image. Here's the markup: ``` <div class="bck"> <div class="bck2"></div> </div> <div class="box"> <p>Text goes here</p> </div> ``` And the CSS: ``` .bck { position: relative; height: 800px; width: 100%; background:url(http://upload.wikimedia.org/wikipedia/commons/7/79/Preller_Norwegian_landscape.jpg) } .bck2 { position: absolute; height: 800px; width: 100%; top: 0; left:0; background:url(https://s3.amazonaws.com/f.cl.ly/items/2W0c3z1z2z3w3A2b0j2w/bck.png); } .box { border: 10px solid white; padding: 80px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 30px; } ``` I've tried a few things with clip-path, z-index and webkit-background-clip, but can't seem to get the combo right. Any pointers would be very appreciated. Thanks. Oh and here's the pen: http://codepen.io/juxprose/pen/yyKEqQ

Original source