CSS - knockout / transparency effect on background images

Question

I’m trying to achieve the following: an element with a background image, a pattern on top of the top of the background image, and a field on top of what “knocks out” the template, but still shows the background image,

Here is an image showing the desired effect:

As you can see, the picture does not appear 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 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 tried a few things with the clip, z-index and webkit-background-clip, but didn't seem to be able to get combos.

Any pointers would be greatly appreciated. Thank.

Oh, and here is the pen: http://codepen.io/juxprose/pen/yyKEqQ

Answer 1

, , , - , , div..

, .

, div.

-

.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>

Hide result