'layers' in html, transparent part - html

Question

I want this: http://gyazo.com/0fe69e349ed5cd4e72a08ed8e60af5d4
But I can't manage to achieve it.
I can not change the image.
I have used an image as a mask, but that gives me this: http://gyazo.com/b69e840d095212bce422252cec081fe9
Is there a way to make the side parts white aswell?
My code:
#section1{
height:275px;
width:100%;
background-image: url('/img/paral1.jpg');
background-position: center top;
background-repeat:no-repeat;
background-size: 100% 916px;
}
.overlay{
position: absolute;
margin-top:180px;
height:100px;
width:100%;
overflow: hidden;
}
.mask{
margin: 0 auto;
background-image: url('/img/section1.png');
height:100px;
width:1080px;
background-size:100% 100%;
}
edit: JSfiddle: http://jsfiddle.net/31kxqmLt/
JSfiddle in fullscreen: http://jsfiddle.net/31kxqmLt/embedded/result/
edit edit: The mask must have a width of 1080px and the rest of the space should be white.

Answer 1

I made this Html/css example of the shape you are trying to make.
It uses background image, pseudo elements and skewX to give the transparent cut out effect on bottom left and bottom right. It also is responsive :
DEMO
output :
.wrap {
width:100%;
padding-bottom:30%;
position:relative;
}
.wrap:before {
content:'';
background-image: url(http://i.imgur.com/ug3M32a.jpg);
background-size:100% auto;
position:absolute;
width:100%;
left:0;
height:50%;
}
.b{
position:absolute;
bottom:0;
width:50%; height:50%;
}
.l{
left:5%;
transform-origin: 0 0;
transform: skewX(45deg);
overflow:hidden;
border-bottom-left-radius:3%;
}
.r{
right:5%;
transform-origin: 100% 0;
transform: skewX(-45deg);
overflow:hidden;
border-bottom-right-radius:3%;
}
.l:before, .r:before{
content:'';
display:block;
width:100%; height:100%;
background-size: 200%;
background-image: url(http://i.imgur.com/ug3M32a.jpg);
}
.l:before{
background-position: 10% -100%;
transform-origin: 0 0;
transform: skewX(-45deg);
}
.r:before{
background-position: 90% -100%;
transform-origin: 100% 0;
transform: skewX(45deg);
}
body {
padding:20px 10%;
background-image : url(http://i.imgur.com/k8BtMvj.jpg);
background-size:cover;
}
<div class="wrap">
<div class="b l"></div>
<div class="b r"></div>
</div>

Answer 2

Js fiddle
full screen
Js fiddle
edited the mask image
set mask width to 100% so that it fits in all the resolutions
.mask{
margin: 0 auto;
background: url('http://s29.postimg.org/5g7z03ypz/image.png') no-repeat bottom;
height:100px;
width:100%;
background-size:100% auto;
}
for smaller resolution min-width 300
#section1{
max-height:200px;
min-height:30%;
overflow:hidden;
position:relative;
}
JS Fiddle