Dashboards & Visualizations
Highlighted

How to set a background image in html dashboard?

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
Highlighted

Re: How to set a background image in html dashboard?

Moderator
Moderator

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
Highlighted

Re: How to set a background image in html dashboard?

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
Highlighted

Re: How to set a background image in html dashboard?

Moderator
Moderator

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

0 Karma
Highlighted

Re: How to set a background image in html dashboard?

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
Highlighted

Re: How to set a background image in html dashboard?

Legend

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

0 Karma
Highlighted

Re: How to set a background image in html dashboard?

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)

Highlighted

Re: How to set a background image in html dashboard?

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>



| eval message="Happy Splunking!!!"


View solution in original post

0 Karma
Highlighted

Re: How to set a background image in html dashboard?

Engager

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

0 Karma