I would like to use a svg as a clipping mask for a div, so that where the svg is placed you see the fixed background. I tried to explain it here:

enter image description here

The size of the svg should depend on the screenwidth.

Is there a possibility to do that?

  • I might do it something like this: jsfiddle.net/k3p8w16c
    – Joonas
    Jun 8, 2018 at 23:51
  • @Joonas Perfect! That's exactly what I had in mind. Great, thank you so much!
    – Matteo
    Jun 9, 2018 at 10:42

1 Answer 1


It is possible to make a big SVG covering the whole div in Illustrator with a transparency mask:


Here the result as a fixed image and a background image class to the div:


  • 1
    Thanks! But I was looking vor the ability to let it adjust to the screenwidth while the yellow foreground still covers 100% of the screen. It seems as if that would need a different approach, if possible after all.
    – Matteo
    Jun 8, 2018 at 21:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.