Dashboards & Visualizations

How to apply background image for table visualization using CSS/Javascript?

paullt12345
Explorer

Hi

I want to set background image for a table visualization. How to handle with css/javascript.

--paull

0 Karma

chrisyounger
SplunkTrust
SplunkTrust

This looks a bit crazy, but below is one way to do it. Paste it into a new dashboard. I am assuming you have some background knowledge of how to do HTML/CSS. Otherwise this will be very hard.

<dashboard>
  <label>TestDashboard</label>
  <row depends="$hide_this$">
    <panel>
      <html>
      <style>
        #background_table {
          background:url(https://i.imgur.com/ZodtLh7.jpg);
        }
        #background_table th, #background_table td, #background_table .table  {
          background-color: transparent !important;
        }
      </style>
    </html>
    </panel>
  </row>
  <row>
    <panel>
      <table id="background_table">
        <search>
          <query>|makeresults count=10 | eval value = random()</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">100</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">cell</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
</dashboard>
0 Karma
Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

Persistent Queue at TcpOut — One of Splunk's Most Practical Features

Splunk introduced persistent queueing at the tcpout layer as one of the most practical resilience features in ...

Build resilience for the agentic era: Join us at Splunk Go San Jose

AI is changing how organizations build, operate, and secure digital services. As teams adopt AI agents and ...

Manage Edge Processor pipelines end to end with APIs

This guide uses the Data Management APIs to create an Edge Processor, onboard one instance, deploy a pipeline ...