Cannot stretch svg background image, aspect ratio will be preserved

Appreciate that this is an old question but I was having issues with this so wanted to post some further information in case it helps anyone else...

<svg preserveAspectRatio="none"> this only works when a viewBox attr is provided, for instance: <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1920 1152">

"preserveAspectRatio only applies when a value has been provided for viewBox on the same element. For these elements, if attribute viewBox is not provided, then preserveAspectRatio is ignored." https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

Hope this helps someone else!


You should add

<svg preserveAspectRatio="none">

to your SVG.

MDN Reference Link

<none>

Do not force uniform scaling. Scale the graphic content of the given element non-uniformly if necessary such that the element's bounding box exactly matches the viewport rectangle.

Tags:

Css

Svg