CSS: scale background SVG in only one direction

So I tried around and found a possibility:

  1. 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"
  2. in a text editor, add preserveAspectRatio="none" to the SVG tag
  3. also, in the SVG tag set the height and width in percents: width="100%" height="100%"
  4. 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.