Add background image to SVG wave - is this possible?

Design help General
1

hi all,

i have a wave .svg in the hero section of the homepage here. i want to add an image to the background of the wave (so that it conforms to the shape of the wave rather than the parent div, and so that it sits behind the wave and has the wave’s colour over the top as a gradient). is it possible to the this in webflow or with custom code?

https://preview.webflow.com/preview/san-v4?utm_medium=preview_link&utm_source=designer&utm_content=san-v4&preview=4fef64c2176868442dafa82c355a3370&mode=preview

2

I think you could achieve what you are looking for with clipping/masking.

I would do the SVG that would have some transparency (or try with playing with opacity) and have a look at this tutorial

3

Thanks @IVG. I’ve used that tutorial a few times to clip text, but it seems unclear to me how I’d use it to clip an svg? Any tips? I’ve tried a few of the methods in the tutorial to no avail

4

Can u provide a sketch or an example of what specifically you would like to achieve?

5

Thanks @IVG. Sorry for the crude sketch but something like this where the photo acts as a fill for the svg wave so conforms to its shape rather than being a square/rectangle.

Slice%20(1)
Slice%20(1)772×703 289 KB

6

Hi

I would use the Z index technic. Regular background image for the hero on 1 Z index and 2 Z index with the SVG.

7

So what you would do is this:
prepare 2 SVG’s - 1 with the wave (and really just a gradient since it is going to be a square) and the second with a photo but with the bottom being cut out in a shape of a wave.

  1. make 2 divs - one inside another (parent=>child)
  2. in the child div put the 1st SVG (with the wave gradient) z-index 1
  3. in the parent div put the the 2nd SVG (with the image and wave cutout) with z-index 2 and adjust its opacity as needed
1 Like