CODEWITHSUNDEEP
csssvgbackground
ThomasK
ThomasK

Reputation: 2220

svg as background wont show

I've created a .svg-file in illustrator CS6. But when I try to add it as a background with CSS like this:

html { 
    background: url(/path/to/images/layout/backgound.svg) no-repeat top center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
 }

It won't show up.

Tried to remove the background-size-thing, but didn't help... I use CodeKit to minify, and combine all CSS-files into one file. Tried to not do that, but didn't work either...

What am I doing wrong?

If i go directrly to the image location in my browser, it appears. But it doesn't show up as the backgound on the site...

Here is a link to my site : http://kiledesign.no
Here is a direct link to the .svg: http://kiledesign.no/assets/images/layout/bg_svg/background.svg

EDIT: Changed to use CSS.MediaQuery and a couple of .jpg-images - for now...

Upvotes: 2

Views: 528

Answers (1)

Robert Longson
Robert Longson

Reputation: 124049

If you want to use an SVG file as an image of any kind (including as a background image) then it must be a single file for privacy reasons. Any external references to anything including external CSS or images will be ignored.

In your case your SVG file includes an external image file, you need to convert that image to a data URI so that all of the image data is in the SVG file itself.

Upvotes: 2

Related Questions