title: SVG background image isn't displaying
body: <p>I am trying to add an SVG as a background image, and for some reason it isn't displaying, and I am not sure why.</p>
  
  <p>Here is the svg:</p>
  
  <pre><code>&lt;svg viewBox="0 0 1000 100" preserveAspectRatio="none"&gt;
      &lt;polygon points="0,0 1000,0 1000,50 0,50" style="fill:#01b6ef;" /&gt;
      &lt;polygon points="0,0 500,0 0,100" style="fill:#222c37;" /&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Here is the CSS:</p>
  
  <pre><code>.head-nav{
      background-image: url("/media/images/header.svg");
      background-repeat: no-repeat;
      height: 100px;
  }
  </code></pre>
  
  <p>And here is the HTML (with css bootstrap):</p>
  
  <pre><code>&lt;div class="fluid-container head-nav"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>When I look at the headers in chrome they look like this (I am also getting a 200 back):</p>
  
  <pre><code>Accept-Ranges:bytes
  Connection:keep-alive
  Content-Length:196
  Content-Type:image/svg+xml
  Date:Sun, 14 Dec 2014 15:46:10 GMT
  ETag:"548daee8-c4"
  Last-Modified:Sun, 14 Dec 2014 15:38:16 GMT
  Server:nginx/1.4.6 (Ubuntu)
  </code></pre>
  
  <p>When I place the xml directly in the html the image displays, but not as a background image. Any suggestions?</p>