Last Updated: February 25, 2016
· robsonsobral
0 nfyu8txkcy7l9htqq8v08golvgypn tq96e18gxteze wf5n43u8aci7u1puckp4vxyt753o6cjr

background-size and SVG

If the background-size you want to use on a SVG background-image doesn't respect its aspect ratio, you need to set the parameter preserveAspectRatio to none on the SVG root element.

<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" preserveAspectRatio="none">

This way, you can stretch or shrink the background just on one dimension by css:

#foo {
    background-size: 100% 3em;

Neither Firefox or Internet Explorer respect preserveAspectRatio on backgrounds, but WebKit does. So, the parameter is needed.

Say Thanks