Change background image url based on javascript array

Question

is it possible to refer to a javascript array value to set a background in css?

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 "logo.png" will be set as the data-title image.

https://gyazo.com/492a81f25533a73e37f75850c02f55e5 Like this!

 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 < arr.length; i++) { if (checkDate(arr[i][0])) { // Adds the elements of the table with filled in information wrap.innerHTML += '<tr><td><a href="' + arr[i][1] + '"' + 'data-title="' + '">' + arr[i][2] + '</a></td><td id="' + 'demo' + (i + 1) + '"></td></tr>' // 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 > -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 < 0) { if (distance > -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); }

 .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; }

 <div class="dropdown"> <table id="timer"> <tbody> <tr> <td class="headtext">TITLE</td> <td class="headtext">TITLE</td> </tr> </tbody> </table> </div>

Answer 1

Unfortunately you can't use attr for the background-image yet, therefor you have to go for a bit more ugly way using css variables.

create a css variable for example lets call it --title-bg and set its value for each item style="--title-bg: url('+arr[i][3]+')"

wrap.innerHTML += '<tr><td><a href="' + arr[i][1] + '" style="--title-bg: url('+arr[i][3]+')" ' + 'data-title="' + '">' + arr[i][2] + '</a></td><td id="' + 'demo' + (i + 1) + '"></td></tr>'

in the css set the background image to be that variable

[data-title]:after {
  ...
  background-image: var(--title-bg);
  ...
}

you can go for a js solution but I think this one is a bit nicer