JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bg-image">
    <div class="containeroverlay relative">
        <div class="framesizer tl">
            <div class="bg-image">
                <div class="frame"></div>
            </div>
        </div>
        <div class="framesizer br">
            <div class="bg-image">
                <div class="frame"></div>                
            </div>
        </div>
    </div>
</div>

CSS

html {
    height:100%;
    width:100%;
}
body {
    margin: 0px;
    height:100%;
    width:100%;
    overflow:hidden;
}
.bg-image {
    height:600px;
    width:800px;
    background-image: url('http://media1.santabanta.com/full1/Outdoors/Landscapes/landscapes-267a.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
}
.relative {    
    position:relative;
}
.containeroverlay {    
    background-color:rgba(0, 0, 0, 0.6);
    height:100%;
    width:100%;
}
.framesizer {
    height:340px;
    width:300px;    
    overflow:hidden;
    position:absolute;
}
.frame {
    background-image: url('http://i.imgur.com/4AcIXsD.png');
    background-repeat: no-repeat;
    background-size: 100%;
    height:340px;
    width:300px;    
}
.tl {
    top:30px;
    left:30px;
}
.tl .bg-image {    
    background-position:right 30px bottom 30px;
}
.br {
    top:calc(100% - 340px - 30px); /* Height of frame, plus 30px spacing */
    left:calc(100% - 300px - 30px); /* Width of frame, plus 30px spacing */
}
.br .bg-image {
    background-position:right calc(800px - 300px - 30px) bottom calc(600px - 340px - 30px); /* Background Position doesn't like percentages for some reason */
}