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!

Enterprise Security Content Update (ESCU) | New Releases

In December, the Splunk Threat Research Team had 1 release of new security content via the Enterprise Security ...

Why am I not seeing the finding in Splunk Enterprise Security Analyst Queue?

(This is the first of a series of 2 blogs). Splunk Enterprise Security is a fantastic tool that offers robust ...

Index This | What are the 12 Days of Splunk-mas?

December 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...