Dashboards & Visualizations

How to add an image/logo in the background on my dashboard ?

patra966
Path Finder

I want to add a image/logo in the XML dashboard. The image in the GitHub repository. Please find the image link. Please let me know how can I achieve it.

https://raw.githubusercontent.com/rajapatra/Test/master/bg.jpg

Thanks in Advance.

Labels (1)
Tags (1)
0 Karma
1 Solution

to4kawa
Ultra Champion

sample:

<form>
  <label>text input with camma</label>
  <row>
    <panel>
      <input type="text" token="clientTransactionId" searchWhenChanged="true" id="webOrder">
        <label>Transaction Id (for multiple use csv's):</label>
        <change>
          <eval token="clientTransactionId_formatted">if(match($clientTransactionId$, ","),replace($clientTransactionId$,","," OR "),$clientTransactionId$)</eval>
        </change>
      </input>
    </panel>
  </row>
  <row>
    <panel>
      <html id="back">
         <style>
           .splunk-textinput
           {
               width: 300px !important;
           }
           label
           {
               width: 300px !important;
           }
           #back
           {
               background-image: url('https://raw.githubusercontent.com/rajapatra/Test/master/bg.jpg')
           }
           </style>
         <p>
          <h2>$clientTransactionId_formatted$</h2>
        </p>
      </html>
    </panel>
  </row>
</form>

https://www.w3schools.com/css/css_background.asp

View solution in original post

to4kawa
Ultra Champion

sample:

<form>
  <label>text input with camma</label>
  <row>
    <panel>
      <input type="text" token="clientTransactionId" searchWhenChanged="true" id="webOrder">
        <label>Transaction Id (for multiple use csv's):</label>
        <change>
          <eval token="clientTransactionId_formatted">if(match($clientTransactionId$, ","),replace($clientTransactionId$,","," OR "),$clientTransactionId$)</eval>
        </change>
      </input>
    </panel>
  </row>
  <row>
    <panel>
      <html id="back">
         <style>
           .splunk-textinput
           {
               width: 300px !important;
           }
           label
           {
               width: 300px !important;
           }
           #back
           {
               background-image: url('https://raw.githubusercontent.com/rajapatra/Test/master/bg.jpg')
           }
           </style>
         <p>
          <h2>$clientTransactionId_formatted$</h2>
        </p>
      </html>
    </panel>
  </row>
</form>

https://www.w3schools.com/css/css_background.asp

PavelP
Motivator

Hi @to4kawa,

you have 7777 points right now!!

0 Karma

to4kawa
Ultra Champion

thank you @PaveIP

7777 I'm so lucky!

0 Karma

patra966
Path Finder

Hi @to4kawa ,

Thanks for information. It is ok if anyone want so the token value with background.
If I have some panels in dashboard with single value and statistics table visualizations, how can implement the image as my background of dashboard.

.dashboard-body{
background-image: url('https://raw.githubusercontent.com/rajapatra/Test/master/bg.jpg');
}
With this query i am getting the part of image in between the small gap.

How can I get it as background of panels also ?

Thanks in Advance.

0 Karma

to4kawa
Ultra Champion

use .svg-container class with id

0 Karma

gcusello
SplunkTrust
SplunkTrust

Hi @patra966,
the only way is to modify your CSS.
Ciao.
Giuseppe

0 Karma
Get Updates on the Splunk Community!

Preparing your Splunk Environment for OpenSSL3

The Splunk platform will transition to OpenSSL version 3 in a future release. Actions are required to prepare ...

Unleash Unified Security and Observability with Splunk Cloud Platform

     Now Available on Microsoft AzureThursday, March 27, 2025  |  11AM PST / 2PM EST | Register NowStep boldly ...

Splunk AppDynamics with Cisco Secure Application

Web applications unfortunately present a target rich environment for security vulnerabilities and attacks. ...