Dashboards & Visualizations

How to set a background image in html dashboard?

dcondliffe
Engager

I just converted my simple XML dashboard to HTML, I want to jazz it up a little bit.
So I want to add a background image to the whole dashboard, not just a panel.
I know how it should work, but adding the background image stanza to the in the HTML dashboard did not work.
I have tried a couple of other places but can't seem to get it to work.

Any help would be greatly appreciated.

Thanks

0 Karma
1 Solution

niketn
Legend

@dcondliffe you can

Option 1) Upload the CSS file to your Splunk App's appserver/static folder and then refer the same in your Splunk dashboard using:

<link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/app/<yourSplunkAppName>/<yourCSSFileName>css" />

Following is an example where app name is search and css file is dashboard.css:

<link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/app/search/dashboard.css" />

In the CSS file have the following code (PS: you can have image also uploaded to app's static folder and just refer the image):

                        .dashboard-body{
                            background-image: url('/static/app/<yourAppName>/<yourImageNameAndType>');
                        }

PS: Following example I have used http URL to make the dashboard with a run anywhere example.
Option 2) If you want background image to be applied to all the dashboards in your app, you can add above code in dashboard.css file.

Option 3) Add the following code to an html panel which will always be hidden to apply In-Page CSS <style>.
PS: Replace the Web URL with static image path as described above.

<div id="row_html_css_style" class="dashboard-row dashboard-row1" data-depends="$alwaysHideCSSStyle$">
    <div id="panel_css_style" class="dashboard-cell" style="width: 100%;">
        <div class="dashboard-panel clearfix">

            <div class="panel-element-row">
                <div id="element1" class="dashboard-element html" style="width: 100%">
                    <div class="panel-body html">
                      <style>
                        .dashboard-body{
                            background-image: url(https://image.freepik.com/free-vector/brick-wall-realistic_1284-4683.jpg);
                        }
                      </style>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

0 Karma

niketn
Legend

@dcondliffe you can

Option 1) Upload the CSS file to your Splunk App's appserver/static folder and then refer the same in your Splunk dashboard using:

<link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/app/<yourSplunkAppName>/<yourCSSFileName>css" />

Following is an example where app name is search and css file is dashboard.css:

<link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/app/search/dashboard.css" />

In the CSS file have the following code (PS: you can have image also uploaded to app's static folder and just refer the image):

                        .dashboard-body{
                            background-image: url('/static/app/<yourAppName>/<yourImageNameAndType>');
                        }

PS: Following example I have used http URL to make the dashboard with a run anywhere example.
Option 2) If you want background image to be applied to all the dashboards in your app, you can add above code in dashboard.css file.

Option 3) Add the following code to an html panel which will always be hidden to apply In-Page CSS <style>.
PS: Replace the Web URL with static image path as described above.

<div id="row_html_css_style" class="dashboard-row dashboard-row1" data-depends="$alwaysHideCSSStyle$">
    <div id="panel_css_style" class="dashboard-cell" style="width: 100%;">
        <div class="dashboard-panel clearfix">

            <div class="panel-element-row">
                <div id="element1" class="dashboard-element html" style="width: 100%">
                    <div class="panel-body html">
                      <style>
                        .dashboard-body{
                            background-image: url(https://image.freepik.com/free-vector/brick-wall-realistic_1284-4683.jpg);
                        }
                      </style>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

dcondliffe
Engager

that worked fantastic ... thanks very much...

0 Karma

pramit46
Contributor

You can try to use CSS for this

there is already an attribute given called: background-image for this.

Also if you want o make a panel transparent, you can play with the attribute opacity (you can set the value to about .5 to .6 to get a good balance)

gcusello
SplunkTrust
SplunkTrust

Hi dcondliffe,
did you tried to modify CSS?
Bye.
Giuseppe

0 Karma

dcondliffe
Engager

was trying another variation, and now the image seems to be loading, but I cant see it because of the panels .... does anyone have any ideas on how I make the panels transparent...

Thanks

0 Karma

evania
Splunk Employee
Splunk Employee

Hello @dcondliffe,
I noticed your question seems to be unfinished, could you give us some more context for your query? You have a much better chance of getting your question answered if you provide more information about your issue. Plus, it will help guide future community users who are facing a similar problem. Thank you!!

0 Karma

dcondliffe
Engager

I did finish the sentence when i was posting, not sure what went wrong... anyway to finish the explanation...... but adding the background image stanza to the in the html dashboard did not work. I have tried a couple of other places but cant seem to get it to work.

Any help would be greatly appreciated...

Thanks

0 Karma

evania
Splunk Employee
Splunk Employee

@dcondliffe Thank you! I've just updated your question.

0 Karma
Get Updates on the Splunk Community!

Earn a $35 Gift Card for Answering our Splunk Admins & App Developer Survey

Survey for Splunk Admins and App Developers is open now! | Earn a $35 gift card!      Hello there,  Splunk ...

Continuing Innovation & New Integrations Unlock Full Stack Observability For Your ...

You’ve probably heard the latest about AppDynamics joining the Splunk Observability portfolio, deepening our ...

Monitoring Amazon Elastic Kubernetes Service (EKS)

As we’ve seen, integrating Kubernetes environments with Splunk Observability Cloud is a quick and easy way to ...