html - SVG in CSS backgrounds not showing up in Safari

Question

The following code doesn't work in Safari, and the image doesn't show up. This only happens in Safari, it works in all other browsers, I can't figure out why. Here is the CSS code:

.hero {
        background: url(images/cards.svg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        height:180px;
        width:100%;
        margin-bottom:20px;
    }

and the HTML code:

<div class="hero"></div>

Update: The above code works when converting the "cards.svg" into a JPG, but I would rather work with SVG as they load faster. Why would the SVG not show up in Safari (7.0.1)? According to http://caniuse.com, SVG as a CSS background image is supported but it won't display.

Answer 1

It's because my server is serving it with an incorrect content-type.

Had to add this to my .htaccess file:

AddType image/svg+xml .svg .svgz

This helped me out: http://css-tricks.com/snippets/htaccess/serve-svg-correct-content-type/