html - How to create a slanted div with a background image applied? -

i trying make slanted div background image. here screenshot of trying achieve.

i have made slanted divs using css triangles. finding technique troublesome in situation because 2 separate parts , pictures wont connect.

as of right in code have div background image applied before element looks this:

#booking-form:before{     content: "";     position: absolute;     top: 0;     bottom: 0;     left: -320px;     border-top: 726px solid transparent;     border-right: 320px solid $secondary; } 

this makes triangle looking if add image triangle fills entire before css , looks this:

but need original.

any suggestions? thank you!

just use full width div suitably angled gradient background instead.

no transforms, no borders.

body {    text-align: center;  }  .content {    height: 150px;    padding: 20px 0;    background: linear-gradient(-65deg, rgba(0, 0, 255, 0.5) 65%, transparent 65%);    display: flex;  }  div {    background-image: url(http://www.fillmurray.com/460/300);  }  form {    width: 50%;    background: rgba(255, 255, 255, 0.85);    margin-left: auto;    margin-right: 1em;  }

<div>    <div class="content">      <form action=""></form>    </div>  </div>