title: How to call background-image URL in Javascript
body: <p>I have a section in Squarespace where I've set the background image via custom CSS:</p>
  <pre><code>background-image:url('https://images.squarespace-cdn.com/content/v1/5f187409db749f75b4b70872/1595438345426-RJBC7YPJSV4XRBU4WSDM/ke17ZwdGBToddI8pDm48kLkXF2pIyv_F2eUT9F60jBl7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0iyqMbMesKd95J-X4EagrgU9L3Sa3U8cogeb0tjXbfawd0urKshkc5MgdBeJmALQKw/Stocksy_txp024e1acdDSm200_OriginalDelivery_2897817.jpg');
  background-repeat:no-repeat;
  </code></pre>
  <p>I'm trying to apply <a href="https://csspoint101.com/awesome-liquid-distortion-effect/" rel="nofollow noreferrer">this hover distortion effect</a> on said background image, and need to call/target it but I don't know how as I'm not a developer - how would I go about doing so? Here's the Javascript code I have so far:</p>
  <pre><code>var myAnimation = new hoverEffect({
      parent: document.querySelector('[data-section-id=&quot;5f1874b38304ad336775b4ec&quot;].section-background'),
      image1: ???,
      image2: ???,
      displacementImage: 'https://homesteadmodern.com/assets/displacement.png'
  });
  </code></pre>
  <p><strong>UPDATE</strong></p>
  <p>I managed to target the div more specifically with <code>parent:  document.querySelector('[data-section-id=&quot;5f1874b38304ad336775b4ec&quot;].page-section &gt; div')</code>, and have managed to use actual URLs in image1 and image2 which show up like a background image as intended. The only problem now is that the hover doesn't work anymore, even though it does work when I take out <code>&gt; div</code> (but that causes the image to show up in the wrong place)! Any help?</p>