0

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.

Kashif
  • 480
  • 4
  • 11
NTLRSH
  • 1
  • 2
  • Are you trying to add a background image to `
    `? Consider [`background-image`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image) instead of [`fill`](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes#using_css).
     – showdev May 21 '21 at 18:55
  • @showdev applying the background image to the div causes the whole div, and therefore SVG, area to be replaced by the background image. I want the image to be bounded by the SVG. – NTLRSH May 21 '21 at 20:32
  • You might find [``](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/pattern) useful. See [Fill SVG path element with a background-image](https://stackoverflow.com/questions/3796025/fill-svg-path-element-with-a-background-image) and [Add a background image (.png) to a SVG circle shape](https://stackoverflow.com/questions/11496734/add-a-background-image-png-to-a-svg-circle-shape). – showdev May 21 '21 at 22:12
  • I looked at the mdn documentation for "fill", but nowhere does it mention anything other than a color property. How do you know that works? – muzzletov May 21 '21 at 23:45

0 Answers0