SVG Background in Firefox

Question

It works on my other site, and I cannot figure out how to display SVG directly in Firefox. In Edge, it also disappears when I resize the browser.

http://lene.isreborn.com/ 

CSS - (I have to use important ones because it's Wordpress):

 header::after { content:""; display: block; background: url(/svg-filer/header-background.svg); background-size: contain; background-repeat: no-repeat; top: 0; left:-1%; width: 102% !important; height: 90px !important; position: absolute; z-index: -1; -ms-transition: top ease .5s; -moz-transition: top ease .5s; -webkit-transition: top ease .5s; transition: top ease .5s; } header.sticky-active::after { top: -20px; } 

SVG file:

  <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="90px" viewBox="0 0 1920 90" preserveAspectRatio="none"> <polygon id="XMLID_3_" fill="#FFFF00" points="1,99.7 1399.2,130 1921,99.7 1921,0 1,0 "/> </svg> 

Answer 1

I have it right now: Background size does not work with “contain”, but with 100% 100% See Mozilla Background Rules
Link to the developer's site: See here

 header::after { content:""; display: block; background: url(/svg-filer/header-background.svg); background-size: 100% 100% !important; background-repeat: no-repeat; top: 0; left:-1%; width: 102% !important; height: 90px !important; position: absolute; z-index: -1; -ms-transition: top ease .5s; -moz-transition: top ease .5s; -webkit-transition: top ease .5s; transition: top ease .5s; } header.sticky-active::after { top: -20px; } 

Answer 2

The image is actually white, isn't it? If you change the fill color to # 000, you will see an image:

 <polygon id="XMLID_3_" fill="#000" points="1,99.7 1399.2,130 1921,99.7 1921,0 1,0 "/> 

https://jsfiddle.net/fbwsh1pf/