Text over background

[admin]

Try this:

Code:

$(function() {
  $('.item-bgm').each(function(_, el) {
    var addr = $(el).data('object');
    if (addr) {
      grp.listen(addr, function(obj) {
        var value = obj.value
          , background = 'repeating-radial-gradient(red, transparent 150px)'; // default color

        if (value > 0 && value < 20 ) {
          background = 'repeating-radial-gradient(#0CAFFF, transparent 150px)';
        }
        else if (value >= 20 && value <= 23) {
          background = 'repeating-radial-gradient(#1DB954, transparent 150px)';
        }
        else if (value > 23 && value < 99) {
          background = 'repeating-radial-gradient(#7C0A02, transparent 150px)';
        }

        $(el).css('background', background);
      });
      
      var heataddr = addr.replace('17/0/', '18/1/'),
          cooladdr = addr.replace('17/0/', '18/3/'),
          heatstat, coolstat;
      
      function updatestat() {
        var color;
        
        if (heatstat) {
          color = 'red';
        }
        else if (coolstat) {
          color = 'blue';
        }
        else {
          color = 'white';
        }
        
        $(el).css('border', '2px solid ' + color);    
      }
      
      grp.listen(heataddr, function(obj) {
        heatstat = obj.value > 0;
        updatestat();
      }, true);

      grp.listen(cooladdr, function(obj) {
        coolstat = obj.value > 0;
        updatestat();
      }, true);
    }
  });
});