33

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 support it (like Chrome).

If you look at this site you'll see the #special-post article (to the right/below the food image) with a red banner-looking background. Notice that as you shrink the window down, the height of the background image drops to retain it's proportions, rather then stretching, as I would like.

EDIT: I checked this on FireFox and it works correctly... so this appears to be a webkit issue.

EDIT: I checked this on Safari and it works! So it looks like my problem is specific to Chrome.

(PS: I'm familiar with this alternative solution, using an img tag, but I'd rather not use it.)

Community
  • 1
  • 1
emersonthis
  • 32,822
  • 59
  • 210
  • 375

4 Answers4

95

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

Littm
  • 4,923
  • 4
  • 30
  • 38
dogcat
  • 994
  • 7
  • 10
2
background-size: cover

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

Chad von Nau
  • 4,316
  • 1
  • 23
  • 34
  • 1
    It works, but it doesn't do what I'm trying to accomplish. `cover` scales UP the entire image proportionally to fill the space. I want the image to distort so that it fits the dimensions of the `article`. – emersonthis Feb 18 '12 at 15:31
  • In more concrete terms, I want all four points of the red background image to stay visible, just stretched/compressed to match the height of the `article`. – emersonthis Feb 18 '12 at 15:33
  • Consider using a PNG instead of an SVG. I know this is kind of lame advice, but it might just be the only practical way. – Chad von Nau Feb 18 '12 at 22:33
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.

emersonthis
  • 32,822
  • 59
  • 210
  • 375
1

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.

HertzaHaeon
  • 601
  • 5
  • 7