background-size:1000%; doesn't work properly in Chrome

Question

I\'m using an svg image as a background. I\'m trying to use CSS3\'s background-size: 100% 100%; but it doesn\'t seem to work, even in browsers which should supp

Answer 1

background-size: cover

Works across the board. Tested w/ Safari, Chrome, & FF.

Answer 2

It turns out this is a known bug in Chrome that is specific to svg background images. I'm running v 17.0.963.56, in case anyone cares, and you can track the bug here.

Answer 3

This is still an issue in Chrome 39, but not in Firefox. I ran into it when scaling a background SVG like so:

background-image: url(bg.svg);
background-repeat: repeat-x;
background-size: 1200px auto;

Even with exact on-the-pixel horizontal dimensions in the SVG I got a small gap. It worked when I didn't scale it:

background-size: auto auto;

Not much of a solution not to be able to scale your background, but still.

Answer 4

Here's a workaround:

Open your .svg file, find the <svg> tag at the beginning and add the following property inside it:

preserveAspectRatio="none"

Source: http://www.yootheme.com/support/question/6801?order=modified