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

Question

I am trying to make a slanted div with a background image. HERE is a screenshot of what I am trying to achieve.
I have always made my slanted divs using css triangles. However I am finding this technique troublesome in this situation because it is 2 separate parts and the pictures wont connect.
As of right now in my code I have a div with the background image applied with a before element that looks like 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 the triangle I am looking for however if I add an image to the triangle it fills the entire before css and looks like this:
But I need it to look like the original.
Any suggestions? Thank you!

Answer 1

Just use a full width div with a 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>

Answer 2

Unfortunately not avalaible everywhere, mix-blend-mode could be an hint using gradients to choose wich parts to blend
body {
height: 100%;
background: linear-gradient(110deg, white 45%, transparent 45%), url(http://lorempixel.com/800/600/city/3) right no-repeat;
background-size: 100% 100%, 75% auto ;
margin: 0;
}
html {
height: 100%;
min-width:800px;
margin: 0;
background: linear-gradient(110deg, transparent 45%, darkcyan 45%), url(http://lorempixel.com/800/600/city/2)top left no-repeat;
background-size: 100% 100%, 75% auto;
}
body {
mix-blend-mode: overlay;
}
/* demo purpose */
body>div {
padding:1px;
padding-left: 55%;
color: black;
}
body>p {
margin:0;
}
/* small snippet view purpose */
html, body {
background-attachment:fixed;
}
<p> nop, mix-blend-mode is not avalaible here :( </p>
<div>
<h2 name="Summary" id="Summary">Summary<a class="button section-edit only-icon" href="/en-US/docs/Web/CSS/mix-blend-mode$edit#Summary"><i aria-hidden="true" class="icon-pencil"></i><span>Edit</span></a></h2>
<p>The <strong><code>mix-blend-mode</code></strong> CSS property describes how an element's content should blend with the content of the element that is below it and the element's background.</p>
<p></p>
<table class="properties">
<tbody>
<tr>
<th scope="row">Initial value</th>
<td><code>normal</code></td>
</tr>
<tr>
<th scope="row">Applies to</th>
<td>all HTML elements</td>
</tr>
<tr>
<th scope="row">Inherited</th>
<td>no</td>
</tr>
<tr>
<th scope="row">Media</th>
<td>visual</td>
</tr>
<tr>
<th scope="row">Computed value</th>
<td>as specified</td>
</tr>
<tr>
<th scope="row">Animation type</th>
<td>discrete</td>
</tr>
<tr>
<th scope="row">Canonical order</th>
<td>the unique non-ambiguous order defined by the formal grammar</td>
</tr>
<tr>
<th scope="row">Creates stacking context</th>
<td>yes</td>
</tr>
</tbody>
</table>
</div>