title: How to use background images outside of nodes in cytoscape.js
body: <p>I need to set three images as the background of node and wrote the following snippet. In the middle is the main image, and the left and right are auxiliary images.</p>
  <p>I expect the two left-right images are out of node border area and near to the node border. I tried to set the expected position with <code>background-position-x</code>. But the images are clipped when move out of the node border.</p>
  <p>I tried <code>&quot;background-clip&quot;: &quot;none&quot;</code> and <code>&quot;background-clip&quot;: [&quot;none&quot;, &quot;none&quot;, &quot;none&quot;]</code>, but both are not helpful.</p>
  <p>Any ideas to resolved it ? Thanks.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.addEventListener("DOMContentLoaded", function() {
    var cy = (window.cy = cytoscape({
      container: document.getElementById("cy"),
  
      ready: function() {
      },
  
      style: [{
          selector: "node",
          style: {
              "border-color": "#B0B0B0",
              "border-width": "1px",
              "border-style": "solid",
              "background-color": "#FFF",
              "background-fit": "none",
              "font-size": "12px",
              "text-max-width": "120px",
              "text-wrap": "ellipsis",
              "text-events": "yes",
              "text-margin-y": "5px",
              "min-zoomed-font-size": "7px",
              "text-halign": "center",
              "text-valign": "bottom",
              "background-image": ['https://js.cytoscape.org/img/cytoscape-logo.svg','https://upload.wikimedia.org/wikipedia/commons/6/6d/Windows_Settings_app_icon.png','https://www.flaticon.com/premium-icon/icons/svg/1688/1688124.svg'],
              "background-width": ["24px", "20px", "20px"],
              "background-height": ["24px", "20px", "20px"],
              "background-position-x": ["12px", "-15px", "40px"],
              "background-position-y": ["12px", "14px", "14px"],
              // "background-clip": ["none", "none", "none"],
              "background-clip": "none",
              width: "48px",
              height: "48px",
              padding: "0px",
  
          }
        },
      ],
  
      elements: [{
          group: "nodes",
          data: {
            id: "n0"
          }
        },
      ],
    }));
    
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-family: helvetica;
    font-size: 14px;
  }
  
  #cy {
    height: 100%;
    width: 100%;
    position: absolute;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"&gt;&lt;/script&gt;
  
  &lt;!--polyfills are needed for this extension for old browsers like IE --&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/shim.min.js"&gt;&lt;/script&gt;
  
  &lt;body&gt;
    &lt;div id="cy"&gt;&lt;/div&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>