How does one make a SVG background that stretches rather than tiles?

Question

I have a SVG background I want to use, and I can\'t figure out how to make it stretch over the whole page, let alone be a background. Could someone help?

(The W3Scho

Answer 1

You want the CSS3 background-size property:

div {
  height:200px;
  background:url(my.svg);
  background-size: 100% auto; /* Fill width, retain proportions */
}

Demo: http://jsfiddle.net/JknDr/1/​​

If you want it to scale non-proportionally to fill the container (so the background stretches and squashes) then use background-size: 100% 100%.

Answer 2

I think you are asking if you can make the SVG to distort and stretch like a PNG would do. This is unfortunately not impossible unless your SVG codes themselves are set up that way (say if your SVG are generated by illustrator, they simply won't do it).

The only way to do it at the moment is to hand code the SVG. For example, instead of drawing a diagonal line with a set angle you can tell the SVG to connect top left corner to bottom right corner. If you have the SVG, I might be able to tell you how to hand code it. (If your SVG is complicated like Phrogz's tiger, it likely won't be possible...)

Also for most modern browsers, you can simply add preserveAspectRatio="none" attribute to the svg tag. If you have .svg files, you need to open the file with sublime text and add the code to the svg tag (something like <svg version="1.1"...(hundreds of lines of codes followed) and you will make it <svg version="1.1" preserveAspectRatio="none"...(hundreds of lines of codes followed).

Answer 3

I just figured it out. On your <svg> tag you need to:

• remove the width and height properties ex: width="375" height="137"
• add this property preserveAspectRatio="none"
• add the viewbox property (containing your original width and height that you just removed viewBox="0 0 375 137"

In your css file on the element that contains your svg background:

• add the property: background-size: 100% 100%;

The key issue for me was that my svg file didn't contain the viewbox property.