topic Re: How to set a background image in html dashboard? in Dashboards & Visualizations

How to set a background image in html dashboard?

dcondliffe — Mon, 17 Jun 2019 19:19:02 GMT

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

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

evania — Mon, 17 Jun 2019 20:36:21 GMT

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!!

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

dcondliffe — Mon, 17 Jun 2019 20:47:05 GMT

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

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

evania — Mon, 17 Jun 2019 20:53:50 GMT

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

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

dcondliffe — Mon, 17 Jun 2019 20:56:34 GMT

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

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

gcusello — Tue, 18 Jun 2019 07:34:52 GMT

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

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

pramit46 — Tue, 18 Jun 2019 09:41:44 GMT

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)

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

niketn — Tue, 18 Jun 2019 17:12:12 GMT

@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>

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

dcondliffe — Wed, 19 Jun 2019 14:22:58 GMT

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