I have an SVG with 2 paths that creates a chevron
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 414 600"><path d="M395.2-41.3c-22.6-26.9-63.1-26.9-85.8 0L204.7 78.8 102.5-38.4c-11.4-13-26.8-20.4-42.9-20.4C24.5-59.1-1.7-23.9-1 10.7c0 18.4 6.4 36.1 17.8 49.1 0 0 185.5 212.3 188 214.3 2.4-2 190.5-217.2 190.5-217.2 23.4-25.8 23.4-72.4-.1-98.2z"/><path d="M395.3 260.8c-22.6-26.9-63.1-26.9-85.8 0l-104.7 120-102.2-117.1c-11.4-13-26.8-20.4-42.9-20.4-35.2-.3-61.4 34.9-60.6 69.5 0 18.4 6.4 36.1 17.8 49.1 0 0 185.5 212.2 188 214.3 2.4-2.1 190.5-217.2 190.5-217.2 23.4-25.8 23.3-72.4-.1-98.2z"/></svg>
I want to apply a single background image to the paths that is fixed in place and responsive.
So far, the only way I've been able to achieve this is by setting the SVG height/width to 0, wrapping the paths with <clipPath id="svgPath"> - creating a div that has the following CSS properties:
background-image: url('https://assets.codepen.io/176014/keep-in-touch-bg.jpeg');
height: 666px;
background-size: contain;
background-repeat: no-repeat;
margin: 0 auto;
background-position: -60px -90px;
clip-path: url(#svgPath);
which isn't flexible at all.
Is there another approach I'm missing?
