title: Responsive SVG background / tailwindcss
body: <p>I want to create a responsive background image parallelogram with only one side skew using CSS and text in front of it. Also it should overlay two different background colors.</p>
  
  <p>This is what I want to achieve:</p>
  
  <p><a href="https://i.stack.imgur.com/ojy0m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ojy0m.png" alt="enter image description here"></a></p>
  
  <p>This is my CSS:</p>
  
  <pre><code>.parallelogram {
    width: 20rem; 
    background-image: url("data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 311.66 97.59'&gt;&lt;title&gt;Asset 1&lt;/title&gt;&lt;g id='Layer_2' data-name='Layer 2'&gt;&lt;g id='Ebene_1_Kopie' data-name='Ebene 1 Kopie'&gt;&lt;polygon points='0 0 0 97.59 281.83 97.59 311.66 0 0 0'/&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;");
    background-size: 20rem 100%;
  }
  </code></pre>
  
  <p>I created <a href="https://codepen.io/AlexZeitler/pen/MZKpez" rel="nofollow noreferrer">a CodePen</a> with a working sample but I can't get the SVG to be responsive.</p>
  
  <p>So the question is: how to make the SVG responsive?</p>