SVG background in firefox - css

Question

Working on my friend's website and I can't figure out how to display the SVG right in Firefox. In Edge it also disappears while I'm resizing the browser.
http://lene.isreborn.com/
CSS - (I have to use important 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've got it right now:
The background-size does not work with 'contain' but with 100% 100%,
See
Mozilla Background rules
Link to developer 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 actually is white, right? 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/