HTML5/SVG: preserveAspectRatio "none" not working in Firefox

Question

I'd like to use SVG images as background images html div elements. The SVG should get stretched accordingly to the div it is embedded into. This works nice in Google Chrome, but in Firefox, the SVG sticks to its width/height ratio when resizing and doesn't get stretched. I'm using preserverAspectRatio = "none".

The SVG looks like this:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1" preserveAspectRatio="none" viewBox="0 0 180 95">
<g
 id="layer1">
<path
   d="m 1.0714286,31.469326 140.0000014,0 0,-30.0000009 30,40.0000009 -30,40 0,-30 -140.0000014,0 z"
   id="path3015"
   style="fill:#4f81bd; fill-opacity:1; stroke:#385d8a; stroke-width:3; stroke-linecap:butt; stroke-linejoin:miter; stroke-opacity:1" />
</g>
</svg>

HTML looks like this:

<div style="
      width: 250px; 
      height: 200px; 
      background-image:url(file.svg); 
      background-repeat:no-repeat;">
          test
 </div>

In Chrome, I can change the width/height of the div element and the SVG image gets stretched without taking care of the original width/height ratio. This behaviour is intended. In Firefox, it just gets resized and keeps its original ratio. Do you know how I could change this? Thanks

Answer 1

Try adding background-size: 100% 100%; to your 'style' div (it works for me).