title: How do I keep the SVG overlays fixed on the image inside the container?
body: <p>I am trying to make the background image and SVG responsive. I have got them both in a container,where both are responsive from their own perspectives. But When I test it by Stretching the browser in and out,the SVG gets displaced. I need to fix the SVG overlays over the background image,where they will be settled at the position of the image I have set them.</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;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;style&gt;
          .container {
              background: url(http://i.imgur.com/b1K76Pf.jpg) no-repeat;
              background-size: contain;
              max-width: 960px;
              height: 565px;
              margin: auto;
          }
          
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div class="container"&gt;
          &lt;div class="main-roof"&gt;
              &lt;svg width="100%" height="100%" viewbox="0 0 1200 180" 
  preserveAspectRatio="none"&gt;
  
  &lt;polygon fill="red" points="115,103 643,93 930,47 372,72"&gt;
  &lt;/polygon&gt; 
  &lt;polygon fill="red" points="30,120 170,112 649,105 513,118 "&gt;
  &lt;/polygon&gt;
  &lt;polygon fill="red" points="610,49 642,57 600,56 576,57"&gt;
  &lt;/polygon&gt; 
              &lt;/svg&gt;
           &lt;/div&gt;
        &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>P.S. I have tried the <code>.container</code> with width and height of <code>%</code> and <code>auto</code>,but in that case,the image just doesn't show up.</p>