Menu
It's easy to stretch a png background image:
.stretched-logo-bg {
background: url("../img/curve.png") center center no-repeat;
background-size: 100% 100%;
}
this won't work with an SVG background though
.stretched-logo-bg {
background: url("../img/curve.svg") center center no-repeat;
background-size: 100% 100%;
}
it won't get stretched, it will maintain its aspect ratio and just center.
At least in Chrome 52
819
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.
There's also preserveAspectRatio="none" option to allow your SVG to scale exactly like a raster image (but with much better resolution), stretching or squishing to fit the height and width you give it.
You can use the CSS background-size: cover; to stretch and scale an image in the background with CSS only. This scales the image as large as possible in such a way that the background area is completely covered by the background image, while preserving its intrinsic aspect ratio.
If you need to override the preserveAspectRatio of the SVG you are displaying you can use an SVG fragment identifier to do that e.g.
.stretched-logo-bg {
background: url("../img/curve.svg#svgView(preserveAspectRatio(none))") center center no-repeat;
background-size: 100% 100%;
}
I don't believe that you can make a SVG to distort like you can with PNGs.
However, if you are mostly supporting modern browsers, you can add preserveAspectRatio="none" attribute to the SVG tag.
For example:
<svg version="1.1" preserveAspectRatio="none" .. etc`
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
