Adding background to grid

Tags: #<Tag:0x00007f8b19c45300>
#1

I’m using handsontable pro. I’m trying to add background to the table like watermark but it’s not working… I’m not sure whether its because of z-index of handsontable.

#2

Hi @jaykumar

Can you create a drawing for it?I am not sure if I understand the idea correctly

#3

table_bg_sample.PNG949×150 16.2 KB

something like this image

#4

Ah OK, for the whole table.

That is not easy as the table rerenders. The easiest way would be to comment lines 34, 179, 240 from the main CSS fine https://cdn.jsdelivr.net/npm/handsontable-pro@5.0.1/dist/handsontable.full.css (non-minified)

#5

U mean commenting background color property? No its not working !!

#6

Yes,

Here is a file I’ve used https://we.tl/t-WRkj0Zvzlt (WeTransfer for the updated .css file)

and the settings

<div class="table"></div>
  <script type="text/javascript">
    var container = document.querySelector('.table');
    var hot = new Handsontable(container, {
      colHeaders: true,
      rowHeaders: true,
      width: 550,
      data: Handsontable.helper.createSpreadsheetData(10,10)
    })
  </script>

  <style>
    .handsontable {
      background: url('https://images.pexels.com/photos/910154/pexels-photo-910154.jpeg')
    }
    .handsontable TD, .handsontable TH {
      color: #fff
    }
  </style>

and I got

#7

Its working. But any way to add it only to the table, not the entire parent container?

#8

I am not sure. We haven’t plan to add a background to the table. I may not work

#9