title: how can I have background-image underneath background-color?
body: <p>I was wondering if there is a way to place a background-image behind the background-color.</p>
  
  <p>I have this color picker with sliders and when I iterate on the alpha channel I want the checkered image to display under the color
  I guess I could add the image in html and then position it under the div but isn't there a "cleaner" solution without having to add <code>position: absolute;</code>? I really want to avoid that if possible </p>
  
  <p>I tried using <code>::before</code> and <code>::after</code> but so far to no success, the image won't display. I tried with <code>content: url("")</code> but it always stays on top and can't seem to bring it below with <code>z-index</code></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let red = document.querySelector("#red");
  let green = document.querySelector("#green");
  let blue = document.querySelector("#blue");
  let alpha = document.querySelector("#alpha");
  let paletteColor = document.querySelector(".paletteColor")
  paletteColor.style.backgroundColor = `rgba(${red.value}, ${green.value}, ${blue.value}, ${alpha.value/100})`
  
  red.addEventListener("input", rgbaValue);
  green.addEventListener("input", rgbaValue);
  blue.addEventListener("input", rgbaValue);
  alpha.addEventListener("input", rgbaValue);
  
  function rgbaValue() {
    let rgba = `rgba(${red.value}, ${green.value}, ${blue.value}, ${alpha.value/100})`
    paletteColor.style.backgroundColor = rgba
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.palette {
    border: 3px solid black;
  }
  
  .sliders {
    list-style: none;
    left: 80px;
    display: inline-block;
  }
  
  .paletteColor {
    height: 100px;
    width: 100px;
    display: inline-block;
  }
  
  .paletteColor::after {
    height: 100px;
    width: 100px;
    display: inline-block;
    background-color: black;
  }
  
  .paletteColor::before {
    height: 100px;
    width: 100px;
    display: inline-block;
    background-image: url("./checkered.jpg");
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="palette"&gt;
    &lt;div class="paletteColor"&gt;&lt;/div&gt;
    &lt;ul class="sliders"&gt;
      &lt;li&gt;&lt;input id="red" type="range" min="0" max="255" value="150"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;input id="green" type="range" min="0" max="255" value="222"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;input id="blue" type="range" min="0" max="255" value="22"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;input id="alpha" type="range" min="0" max="100" value="100"&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div&gt;</code></pre>
  </div>
  </div>
  </p>