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!

Developer Spotlight with Brett Adams

In our third Spotlight feature, we're excited to shine a light on Brett—a Splunk consultant, innovative ...

Index This | What can you do to make 55,555 equal 500?

April 2025 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with this ...

Say goodbye to manually analyzing phishing and malware threats with Splunk Attack ...

In today’s evolving threat landscape, we understand you’re constantly bombarded with phishing and malware ...