title: Change background image url based on javascript array
body: <p>is it possible to refer to a javascript array value to set a background in css?</p>
  <p>i have a table with several cells, and i want the css to take the third value in the array and make it the background, but i cant get it to work, the idea is that whatever value is in the third array &quot;logo.png&quot; will be set as the data-title image.</p>
  <p><a href="https://gyazo.com/492a81f25533a73e37f75850c02f55e5" rel="nofollow noreferrer">https://gyazo.com/492a81f25533a73e37f75850c02f55e5</a> Like this!</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>var arr = [
    // Date...................Link..............Title
    ['Dec 18, 2020 01:00:00', 'TEXT', 'TEXT', 'image.png'], //** these "image.png" are the ones i want to be added to the css above**//
    ['Dec 18, 2020 01:00:00', 'TEXT', 'TEXT', 'image2.png'],
    ['Dec 18, 2020 01:00:00', 'TEXT', 'TEXT', 'image3.png'],
    ['Dec 18, 2020 01:00:00', 'TEXT', 'TEXT', 'image4.png'],
    ['Dec 18, 2020 01:00:00', 'TEXT', 'TEXT', 'image5.png'],
    ['Dec 18, 2020 01:00:00', 'TEXT', 'TEXT', 'image6.png'],
    ['Dec 18, 2020 01:00:00', 'TEXT', 'TEXT', 'image7.png'],
    ['Dec 18, 2020 01:00:00', 'TEXT', 'TEXT', 'image8.png'],
    ['Dec 18, 2020 01:00:00', 'TEXT', 'TEXT', 'image9.png'],
    ['Dec 18, 2020 01:00:00', 'TEXT', 'TEXT', 'image10.png'],
    ['Dec 18, 2020 01:00:00', 'TEXT', 'TEXT', 'image11.png'],
  ];
  
  
  // Remove after 5min
  var remAft = 10;
  
  // Get element with ID "timer"
  var wrap = document.querySelector('#timer tbody');
  // For loop Array "arr"
  for (var i = 0; i &lt; arr.length; i++) {
    if (checkDate(arr[i][0])) {
      // Adds the elements of the table with filled in information
      wrap.innerHTML += '&lt;tr&gt;&lt;td&gt;&lt;a href="' + arr[i][1] + '"' + 'data-title="' + '"&gt;' + arr[i][2] + '&lt;/a&gt;&lt;/td&gt;&lt;td id="' + 'demo' + (i + 1) + '"&gt;&lt;/td&gt;&lt;/tr&gt;'
      // Invokes the function by passing as arguments Date and ID
      new myTimers(arr[i][0], 'demo' + (i + 1));
    }
  }
  
  function checkDate(tim) {
    var d = new Date(tim);
    var countDownDate = d.setTime(d.getTime() + d.getTimezoneOffset() * 60 * 1000);
  
    var now = new Date().getTime();
  
    var distance = countDownDate - now;
    if (distance &gt; -60 * 1000 * remAft) {
      return true;
    } else {
      return false;
    }
  }
  
  function myTimers(tim, ele) {
    // Set the date we're counting down to
    var d = new Date(tim);
    var countDownDate = d.setTime(d.getTime() + d.getTimezoneOffset() * 60 * 1000);
  
    // Update the count down every 1 second
    var x = setInterval(function() {
  
      // Get today's date and time
      var now = new Date().getTime();
  
      // Find the distance between now and the count down date
      var distance = countDownDate - now;
  
      // Time calculations for days, hours, minutes and seconds
      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  
      // Display the result in the element with id="demo"
      document.getElementById(ele).innerHTML = days + "d " + hours + "h " +
        minutes + "m " + seconds + "s ";
  
      // If the count down is finished, write some text
      if (distance &lt; 0) {
        if (distance &gt; -60 * 1000 * remAft) {
          document.getElementById(ele).innerHTML = "DONE";
          document.getElementById(ele).classList.add('dropped');
          document.getElementById(ele).style.color = 'tomato';
          document.getElementById(ele).style.textDecoration = "line-through";
        } else {
          clearInterval(x);
          var chekEl = document.getElementById(ele);
          if (chekEl) {
            chekEl.parentElement.remove();
          }
        }
      }
  
      // If days is 0 add class 'endsoon'
      if (days === 0) {
        document.getElementById(ele).classList.add('endsoon');
      }
  
    }, 1000);
  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.dropdown {
    width: 600px;
    padding: 0px;
    padding-top: 100px;
    padding-bottom: 150px;
  }
  
  table {
    border-width: 70px;
    border-color: black;
    background-color: #DCF5F1;
  }
  
  .dropdown {
    margin: auto;
  }
  
  th {
    border: 2px solid black;
  }
  
  td {
    border: 2px groove black;
  }
  
  a {
    text-decoration: none;
    color: black;
  }
  
  a:hover {
    color: grey;
    text-decoration: underline;
  }
  
  table {
    width: 600px;
    table-layout: fixed;
    font-size: 20px;
  }
  
  table td {
    padding: 20px;
    font-weight: bold;
    font-family: arial;
  }
  
  #timer .endsoon {
    color: red;
  }
  
  [data-title]:hover:after {
    opacity: 1;
    transition: all 0.5s ease 0.5s;
    visibility: visible;
  }
  
  [data-title]:after {
    content: attr(data-title);
    background-color: #f4c2sc2;
    background-image: url(arr[3]); /* HERES THE BACKGROUND-IMAGE Line */
    font-size: 20px;
    position: absolute;
    padding: 20px 5px 2px 5px;
    left: -130px;
    top: -35px;
    height: 60px;
    width: 80px;
    white-space: nowrap;
    opacity: 0;
    z-index: 99999;
    visibility: hidden;
  }
  
  [data-title] {
    position: relative;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="dropdown"&gt;
    &lt;table id="timer"&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td class="headtext"&gt;TITLE&lt;/td&gt;
          &lt;td class="headtext"&gt;TITLE&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>