title: css SVG background - strange transparent line around
body: <p>I have tried to use svg image as background-image in css. And I have faced with strange behavior. Element that has svg background has strange transparent line around.</p>
  
  <p>In the example below it is shown as line between the first and the second div. Size of the line changes depending on width of the element.</p>
  
  <p><a href="http://jsfiddle.net/mahnunchik/g1ux4e7o/" rel="nofollow noreferrer">http://jsfiddle.net/mahnunchik/g1ux4e7o/</a></p>
  
  <p>Screenshot from jsfiddle:</p>
  
  <p><img src="https://i.stack.imgur.com/fl9UG.png" alt="enter image description here"></p>
  
  <p>It reproduces at least in Chrome 37 and FF 32 on Windows and Linux</p>
  
  <p>Svg image is quite simple:</p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 76" enable-background="new 0 0 1920 76"&gt;
    &lt;path fill="#DE4943" d="M0 76L1921 0 0 0z"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p><strong>Any idea how to fix that? Or how to explain that?</strong></p>