title: Inline SVG in CSS doing background image
body: <p>I'm trying to do this with Inline SVG inside CSS, but it won't work.</p>
  
  <p>The Original:
  <a href="https://codepen.io/cmdw/pen/vQqzyB" rel="nofollow noreferrer">https://codepen.io/cmdw/pen/vQqzyB</a></p>
  
  <p>Inline SVG inside CSS:</p>
  
  <p><a href="https://codepen.io/honk007/pen/wvBgxGZ" rel="nofollow noreferrer">https://codepen.io/honk007/pen/wvBgxGZ</a></p>
  
  <pre><code>.divider{
          content                   : " ";
          height                    : 25px;
          width                     : 100%;
          background-image: url("data:image/svg+xml;utf8,&lt;svg class='editorial' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 24 150 28'&gt;&lt;defs&gt;&lt;path id='gentle-wave' d='M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z' /&gt;&lt;/defs&gt;&lt;g class='parallax1'&gt;&lt;use xlink:href='#gentle-wave' x='50' y='3' fill='#f461c1' /&gt;&lt;/g&gt;&lt;/svg&gt;");
  
          background-size        : 49px 100%;
          -webkit-background-size: 49px 100%;
          position               : absolute;
          top                    : -25px;
      }
  </code></pre>
  
  <p>I have the feeling the quotes are the problem.</p>