Fixed SVG background pattern

I have this text box with an svg on top of it. I would like to have this box be responsive but not stretch the pattern on the svg if that makes any sense. Is there something I'm doing wrong, or an easier way to go about this? Thanks!

#container {
 width: 50%;
 }


#yellowbox {
  margin-top: -21px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 5px;
  background-image: url("http://ift.tt/2b0SP8r"); 
}

<div id="container">
  
  <div id="yellowtopper">
 
<svg width="100%" viewBox="0 0 370 20">
 <defs>
    <pattern id="imgpattern" x="0" y="0" width="183" height="192" patternUnits="userSpaceOnUse">
      <image xlink:href="http://ift.tt/2aUvofP" x="0" y="0" width="183" height="192"></image>
    </pattern>
  </defs>
  
 <path fill="url(#imgpattern)" d="M-0.000,7.216 C-0.000,7.216 26.141,12.071 84.130,9.810 C138.796,7.680 210.170,0.808 270.320,0.081 C328.862,-0.627 371.000,3.973 371.000,3.973 L371.000,31.000 L-0.000,31.000 L-0.000,7.216 Z"  fill="url(#img1)" class="cls-1"/>
</svg>
  </div>  
  
  <div id="yellowbox">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat gravida interdum. Sed eget ipsum in augue malesuada blandit. Curabitur a facilisis lectus. Sed ultricies risus non cursus interdum. Maecenas nec eros dolor. In ultricies nisi nec nisi varius placerat.  6-column yellow</p> 
  </div>
  
</div>