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

user_731881 0
Viewed 44076

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 W3Schools pages, on both SVG nor on backgrounds, gave me nothing).

<object data="background.svg" type="image/svg+xml" width="100%" height="100%"> does not exactly work.

svg css html
4 Answers

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.

user_1568920

I found that Illustrator was adding xml:space="preserve" to my SVG which was preventing the background image from stretching to fit the space. I see that this has been deprecated; however, Illustrator is still adding it. Once I changed that attribute to xml:space="preserve" and added preserveAspectRatio="none" the image scales as intended.

user_25743540
Related