CSS: scale background SVG in only one direction
So I tried around and found a possibility:
- in Inkscape or in a text editor, set the following viewBox according to the size of your image – so if your image is 100*20px set it like this:
viewBox="0 0 100 20"
- in a text editor, add
preserveAspectRatio="none"
to the SVG tag - also, in the SVG tag set the height and width in percents:
width="100%" height="100%"
- in the CSS markup, then simply use
background-size: 100% 20px;
With these steps it is possible to scale the background SVG using CSS in the same way that one would scale any bitmap image.