imagem de fundo em distorcida div - html, css

tendo um problema aqui. Eu tenho o meu div distorcido perfeito, mas agora eu quero a imagem para se encaixar nele sem azulejos, então se alguém puder ajudar, isso seria incrível.

Eu estou indo para isso:

E até agora eu tenho isso:

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;

}

Respostas:

Você deveria usar background-size: cover se você quiser que o img preencha todo o container, e então use background-repeat: no-repeatter uma imagem.

Algo assim deveria funcionar:

.box {
position:relative;
width:100%;
height:500px;
background: url(../images/clouds.jpeg);
background-size:cover;
background-repeat: no-repeat;
padding:10px;
margin-bottom:100px;
}

Essa imagem não é distorcida ..

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>

A parte inferior esquerda pode ser feita cobrindo a imagem com a cor branca com gradiente linear inclinado.