10

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.

3
  • 1
    This works perfectly for me in Safari 7.0.1 - try my jsFiddle demo (jsfiddle.net/grantgibson/MsA2J) to see if it works for you. If my demo works for you, perhaps you could update the fiddle with your own SVG image as a next step? Mar 16, 2014 at 8:38
  • Yeah same for me and it's even working on my old Safari 5.1.10.
    – Rofez
    Mar 16, 2014 at 8:47
  • If you try opening your SVG file in Safari directly in its own tab does it display properly?
    – AmeliaBR
    Mar 16, 2014 at 19:05

3 Answers 3

11

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/

1
  • is this for nginx or what?
    – chovy
    Nov 18, 2019 at 23:58
1

I ran into the same problem, although in my case it wasn't the content type that was the problem. It turned out that I had to add quotes around the URL to get it to work, i.e.:

background-image: url('/path/to/my.svg');

...not:

background-image: url(/path/to/my.svg);

I know this isn't the issue the OP was encountering, but posting this here for the benefit of anyone else who runs into the same issue as me and comes to this thread.

0

I fixed the issue by adding following code to .htaccess file.

<ifModule mod_headers.c>
    <FilesMatch "\.(svg|svgz)$">
    Header set Content-Type "image/svg+xml"
    </FilesMatch>
</IfModule>

Reference :

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.