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.
Written by Robson Sobral
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#