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
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.

Can’t make it to .conf25? Join us online!

Get Updates on the Splunk Community!

What Is Splunk? Here’s What You Can Do with Splunk

Hey Splunk Community, we know you know Splunk. You likely leverage its unparalleled ability to ingest, index, ...

Level Up Your .conf25: Splunk Arcade Comes to Boston

With .conf25 right around the corner in Boston, there’s a lot to look forward to — inspiring keynotes, ...

Manual Instrumentation with Splunk Observability Cloud: How to Instrument Frontend ...

Although it might seem daunting, as we’ve seen in this series, manual instrumentation can be straightforward ...