Placing image inside SVG, removes the SVG - html

Question

I have this HTML code:
<div class="shape-wave fill-accent">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 -30 1200 150" preserveAspectRatio="none">
<filter id="dropshadow" y="-100%" height="300%">
<feGaussianBlur in="SourceAlpha" stdDeviation="9"/>
<feOffset dx="0" dy="-2" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="2"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<path class="shape-fill" filter="url(#dropshadow)" d="M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z"></path>
</svg>
</div>
and this CSS code:
.shape-wave {
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.shape-wave svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 40px;
}
#media (min-width: 720px) {
.shape-wave svg {
height: 70px;
}
}
.fill-accent {
fill: url(/Background.png);
}
When I try to use .fill-accent on the SVG element to fill it with the background image, the SVG completely disappears from the page instead replaced with the below elements background.
what I'm trying to do is have this wave shape filled with the same background image (background.png) as the element above it so it looks like a fluent transition to the next section although I cannot seem to get it to take the image, it works fine when it's just a solid colour.
also sorry I know this is probably a bit of a mess, first time coding HTML really, I'll try to clean it up at the end.