Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

svg

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.

like image 617
technillogue Avatar asked Jul 25 '12 20:07

technillogue


People also ask

How do I stretch a background image to fit?

When you work with background images, you may want an image to stretch to fit the page despite the wide range of devices and screen sizes. The best way to stretch an image to fit the background of an element is to use the CSS3 property, for background-size, and set it equal to cover.

Can you set SVG as background?

SVG images can be used as background-image in CSS as well, just like PNG, JPG, or GIF. All the same awesomeness of SVG comes along for the ride, like flexibility while retaining sharpness. Plus you can do anything a raster graphic can do, like repeat.

Does SVG have background color?

The SVG background is used to draw any kind of shape, set any color you want by the set property. The below examples illustrates the concept of SVG set background-color more specifically. The SVG allowed the CSS background sizing, position, and much more complex property.


2 Answers

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).

like image 101
Aero Wang Avatar answered Oct 08 '22 09:10

Aero Wang


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.

like image 38
kevinius Avatar answered Oct 08 '22 09:10

kevinius