title: Why doesn't my SVG background-image work?
body: <p>I placed a green PNG image as background to a div and it looks like this:</p>
  <p><a href="https://i.stack.imgur.com/U7po9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U7po9.jpg" alt="working background image" /></a></p>
  <p>I used a CSS hack in order to keep the text inside the green background. So this is my code for that section:</p>
  <pre class="lang-css prettyprint-override"><code>#aboutprocess {
      background: url(&quot;../img/tech_bg.png&quot;) no-repeat left top;
      width: 100%;
      background-size: cover;
  }
  #aboutprocess .container {
      padding-top: 32.6316%;
      position: relative;
  }
  #aboutprocess .row {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
  }
  #aboutprocess p {
      color: #ffffff;
      text-align: center;
  }
  </code></pre>
  <pre class="lang-html prettyprint-override"><code>&lt;section id=&quot;aboutprocess&quot;&gt;
      &lt;div class=&quot;container&quot;&gt;
          &lt;div class=&quot;row&quot;&gt;
              &lt;div class=&quot;col-md-8 &quot;&gt;
                  &lt;p class=&quot;text-center&quot;&gt;Our agile team continuously delivers working software and empowers your organization to embrace changing requirements.&lt;/p&gt;
                  &lt;button type=&quot;button&quot; class=&quot;btn btn-link center-block white&quot; role=&quot;link&quot; type=&quot;submit&quot; name=&quot;op&quot; value=&quot;Link 2&quot;&gt;about our process&lt;/button&gt;
              &lt;/div&gt;
              &lt;!--end col-md-8 col-md-offset-2--&gt;
          &lt;/div&gt;
          &lt;!--end row --&gt;
      &lt;/div&gt;
      &lt;!--end container--&gt;
  &lt;/section&gt;
  &lt;!--end aboutprocess--&gt;
  </code></pre>
  <p>I want to replace the PNG with an SVG file, and the only thing that I changed in the CSS is the file extension:</p>
  <pre class="lang-css prettyprint-override"><code>#aboutprocess {
      background: url(&quot;../img/tech_bg.svg&quot;) no-repeat left top;
      width: 100%;
      background-size: cover;
  }
  </code></pre>
  <p>But when I preview this in browser, I can't see the background anymore:</p>
  <p><a href="https://i.stack.imgur.com/VLGZF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VLGZF.jpg" alt="non-working background image" /></a></p>
  <p>What am I doing wrong? You can see the demo page with the PNG background image <a href="http://dolm.ragne.me/" rel="nofollow noreferrer">here</a>.</p>
  <p>Here's a <a href="https://www.dropbox.com/s/9qe9cmc4nck2i7l/tech_bg.svg?dl=0" rel="nofollow noreferrer">Dropbox link to the SVG file</a>.</p>