CSS: scale background SVG in only one direction

Question

I have a nice background SVG image from inkscape which marks the transition from one text section to the next. I want that background image to scale up or down to the full width of the text section. For reasons of responsivity, that size depends on the browser width. However, I want that background image to have a fixed height of 20px.

What does not work:

1. background-size: cover; That does not work for me because it will cut the image off at the right instead of scaling it down, okay.
2. background-size: contain That does not work for me because it will always scale the image down in x and y direction simultaneously. As a result, the image always retains its original x-y-ratio, okay.
3. combining cover and contain That is not possible for syntactical reasons, okay.
4. background-size: 100% 20px; or background-size: auto 20px That does not work, even though I would have expected it to. I tried it with a PNG and it worked. But with the SVG, the width is being adjusted correctly and the height is then also being adjusted so that the image does retain its original ration, which I do not want it to. However, I wish to use an SVG because it's a relatively simple image and I want it in the best resolution on all devices, including the really big screens, without using a huge PNG image.
5. As the problem seems to be SVG-specific, I opened the SVG in a text editor and inserted into the tag the attribute and value preserveAspectRatio="none". As it did still not work I also tried removing the width and height and viewBox specifications in the SVG tag. No success.

Istle

svg will always try to keep ratio ... can you share the SVG and show us the intended result? – Chenab

do you have viewBox property in the svg? – Dermoid

Please update your question with a minimal reproducible example – Bunin

Answer 1

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.

Istle

You got your answer. You need viewBox property on the svg for it to scale properly. By default. set that to certain size. Consider a default size, then u can work with it. – Dermoid

You don't need step #1. Just set an appropriate viewBox for your existing SVG. – Bunin

The preserveAspectRatio="none" really helped me out, thanks! – Circuity

This is a great (and timely) solution - thank you. – Loony

Answer 2

SVG vectors are rendered differently than static images. They are traced live on the browser. This is what makes them great for web use as they can scale in size without losing quality. Because of this css is unable to alter the rendering in a way that would distort it. If using svg is a strict requirement and assuming you expect dynamic widths then you could split it in multiple sections and have them distributed horizontally giving you the effect you are looking for if your width is static then just edit it on any online svg editor or Illustrator.

FYI this might be a duplicate question: How does one make a SVG background that stretches rather than tiles?

Timepiece

Actually, one can simply edit it in a text editor to "unlock" the ratio, I pointed it out in my own answer. – Istle

True. But you are no longer using CSS to do this. – Timepiece

Yes, there seems to be no possibility in CSS. Repeating the image in CSS, as you suggested, may work for repeatable images and may be a good fix for them. – Istle