Search code examples
csssvgbackground-image

Stretch SVG background image?

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

Solution

  • 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%;
}