background image in skewed div - html

Question

having a problem here. I have a got my skewed div perfect but now I want the image to fit in it without tiling so if anyone can help that would be awesome.
I'm going for this:
And so far I have this:
HTML
<div class="box"></div>
CSS
.box {
position:relative;
width:100%;
height:500px;
background: url(../images/clouds.jpeg);
background-size:contain;
padding:10px;
margin-bottom:100px;
}
.box:after {
position:absolute;
content:'';
width:100%;
height:100%;
top:0;
left:0;
right:0;
background:inherit;
background-size:contain;
transform-origin: top left;
transform:skewY(10deg);
z-index: -1;
}

Answer 1

You should use background-size: cover if you want the img to fill the entire container, and then use background-repeat: no-repeatto have one image.
Something like that should work:
.box {
position:relative;
width:100%;
height:500px;
background: url(../images/clouds.jpeg);
background-size:cover;
background-repeat: no-repeat;
padding:10px;
margin-bottom:100px;
}

Answer 2

That image is not skewed..
div{
display:inline-block;
margin:10px;
postion:relative;
width:100px;
height:100px;
background:cyan;
}
div.covered{
background:
linear-gradient(20deg,white,white,40px,transparent 40px,transparent),cyan;
}
<div>
normal
</div>
<div class="covered">
covered
</div>
Bottom-left part can be done by covering image with white color with tilted linear gradient.