Ideas for placing curved SVG graphic over two sections?
We are commencing a build this week, and have stumbled upon an interesting SVG curved graphic that the design team has put together.
We are curious on how others would solve this?
1. Seperate the graphic and set as a background image on each section?
2. Use JS to keep track of sections and position absolute the graphic?
3…
Keen to hear your thoughts.
The simplest implementation is obviously important. Primarily because it would be nice to ensure this graphic can be controlled in the CMS.
2 Replies
Breaking the image and using 2 sections as background seems like a bad idea - when you want to change sections, the element could break.
I would put the image in its own section (or in the top section maybe), use position: absolute and z-index so it's on top z layer. Add pointer-events: none so the image doesn't block the form below it
unless i'm missing something, this just looks like a pseudo element to me?