Solved: Re: How to add an image/logo in the background on ...

patra966 · ‎04-21-2020

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.

to4kawa · ‎04-22-2020

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 · ‎04-22-2020

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 · ‎04-23-2020

Hi @to4kawa,

you have 7777 points right now!!

to4kawa · ‎04-23-2020

thank you @PaveIP

7777 I'm so lucky!

patra966 · ‎04-23-2020

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.

to4kawa · ‎04-23-2020

use .svg-container class with id

gcusello · ‎04-21-2020

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

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

simple XML

Observe and Secure All Apps with Splunk

What's New in Splunk Observability - August 2025

Introduction to Splunk AI

Are you a member of the Splunk Community?

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

simple XML

Observe and Secure All Apps with Splunk

What's New in Splunk Observability - August 2025

Introduction to Splunk AI