SVG triangle separator with image background
<p>Well, I'm trying to create an SVG section separator. It worked like this:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section id="section1"&gt;
&lt;/section&gt;
&lt;svg width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none"&gt;
  &lt;path d="M0 0 L50 100 L100 0 Z" /&gt;
&lt;/svg&gt;
&lt;section id="section2"&gt;
&lt;/section&gt;</code></pre>
</div>
</div>
</p>

<p><a href="https://i.stack.imgur.com/kzwT7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kzwT7.png" alt="enter image description here"></a></p>

<p>So far, so good. But now, I want to add a background to section1, including the SVG "pick", in example: </p>

<p><a href="https://i.stack.imgur.com/2MouO.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2MouO.jpg" alt="enter image description here"></a></p>

<p>All I've accomplished is (really bad results): </p>

<p>Adding a</p>

<pre><code>background: url(img)
</code></pre>

<p>to the  element</p>

<p><a href="https://i.stack.imgur.com/aSMsH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aSMsH.png" alt="enter image description here"></a> </p>

<p>And: </p>

<p>Justing adding a BG to section1</p>

<p><a href="https://i.stack.imgur.com/wMrWo.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wMrWo.jpg" alt="enter image description here"></a></p>