Why doesn't my SVG background-image work?

Question

I placed a green PNG image as background to a div and it looks like this:

I used a CSS hack in order to keep the text inside the green background. So this is my code for that section:

#aboutprocess {
    background: url("../img/tech_bg.png") 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;
}

<section id="aboutprocess">
    <div class="container">
        <div class="row">
            <div class="col-md-8 ">
                <p class="text-center">Our agile team continuously delivers working software and empowers your organization to embrace changing requirements.</p>
                <button type="button" class="btn btn-link center-block white" role="link" type="submit" name="op" value="Link 2">about our process</button>
            </div>
            <!--end col-md-8 col-md-offset-2-->
        </div>
        <!--end row -->
    </div>
    <!--end container-->
</section>
<!--end aboutprocess-->

I want to replace the PNG with an SVG file, and the only thing that I changed in the CSS is the file extension:

#aboutprocess {
    background: url("../img/tech_bg.svg") no-repeat left top;
    width: 100%;
    background-size: cover;
}

But when I preview this in browser, I can't see the background anymore:

What am I doing wrong? You can see the demo page with the PNG background image here.

Here's a Dropbox link to the SVG file.

Answer 1

Browsers will NOT display SVG files if the web server transfers it with the wrong "content-type" header.

If your web service is returning application/octet-stream or text/xml, the image will not work properly, in spite of the SVG being transferred correctly and the SVG file itself being fine.

The correct media type for SVG is image/svg+xml.

Answer 2

There are a few potential solutions here.

• Revisit how you created the SVG. The software you use and the method you generate it with (e.g. in Illustrator) matter greatly. There's a pretty specific way of doing it correctly.
  _{This was the solution for OP; see comments for specifics}

• Making absolutely positively sure that tech_bg.svg is in the directory that it's supposed to be (the img folder) and that it's spelled exactly the same as it is in the text editor, including case sensitivity of the filename and file extension. GitHub certainly takes extension case sensitivity literally and I've had problems uploading SVG files for that same reason (.svg vs .SVG).

• Increasing the z-index of #aboutprocess, particularly if your text really has disappeared (I'm assuming it's still there, just white, but try highlighting it to make sure). Play around with the other CSS values nearby like no-repeat, left, top, etc, too.

• Try clearing your browser cache and refreshing once, and try other browsers too. Also, if by some chance you happen to be using IE8 and below or Android 2.3 and below, that would definitely be the cause; they don't support SVGs in background-images.

It's a tough question to answer definitively since we can't be there testing it with you on your local machine, which is where the inconsistency is happening.