# Getting image in dashboard

**URL:** <https://discourse.nodered.org/t/getting-image-in-dashboard/228>\
**Category:** Dashboard\
**Created:** [18 May 2018 09:51 UTC](https://discourse.nodered.org/t/getting-image-in-dashboard/228 "2018-05-18T09:51:52Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![mammoet](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@mammoet](https://discourse.nodered.org/u/mammoet)\
**Post date:** [18 May 2018 09:51 UTC](https://discourse.nodered.org/t/getting-image-in-dashboard/228/1 "2018-05-18T09:51:52Z")

</div>

Oke so i saw this tread on the google group : [https://groups.google.com/forum/#!topic/node-red/xMsaLwZ8lnw](https://groups.google.com/forum/#!topic/node-red/xMsaLwZ8lnw)  
about getting a background image.  
now i have changed my httpstatic to /home/pi/image/  
and my question is what do i need to change in the script that the guy on this tread is providing

Kind Regarts Niels-Yvo Grummel

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [18 May 2018 10:22 UTC](https://discourse.nodered.org/t/getting-image-in-dashboard/228/2 "2018-05-18T10:22:37Z")

</div>

Hi @mammoet

If you have set `httpStatic` to `/home/pi/image` then any file you have in that directory can be accessed from `http://localhost:1880/`

For example, if your background image is `/home/pi/image/my-image.png` then you should be able to access that as `http://localhost:1880/my-image.png`

Following the example on the mailing list you’ve linked to, you can insert the following into a `ui_template` node within your dashboard:

```auto
<style>
    body {
        background-image: url("/my-image.png");
    }
</style>

```

---

<div class="post-metadata">

**Author:** ![mammoet](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@mammoet](https://discourse.nodered.org/u/mammoet)\
**Post date:** [18 May 2018 10:59 UTC](https://discourse.nodered.org/t/getting-image-in-dashboard/228/3 "2018-05-18T10:59:46Z")

</div>

> [@knolleary](#):
>
> [http://localhost:1880/my-image.png](http://localhost:1880/my-image.png)

Somehow it doest work for me.  
ill put a prtscreen to to this reply.  
and my node setup atm.

 ![httpstatic%20screen](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/5c0dfff4080ebca2535ecc88e64abcb832d51c9a.jpg)

[{"id":"37e9e5e1.d6b36a","type":"ui\_template","z":"7afea17.cb4ff6","group":"96491a51.892388","name":"","order":0,"width":0,"height":0,"format":"\n body {\n background-image: url("/school.jpg");\n }\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":260,"y":600,"wires":[["29604d95.36fe92"]]},{"id":"29604d95.36fe92","type":"debug","z":"7afea17.cb4ff6","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","x":910,"y":600,"wires":},{"id":"96491a51.892388","type":"ui\_group","z":"","name":"image","tab":"42744ce7.172a24","disp":true,"width":"6","collapse":false},{"id":"42744ce7.172a24","type":"ui\_tab","z":"","name":"Image","icon":"dashboard","order":2}]

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [18 May 2018 11:16 UTC](https://discourse.nodered.org/t/getting-image-in-dashboard/228/4 "2018-05-18T11:16:23Z")

</div>

The line in your settings file for `httpStatic` is still commented out - so is being ignored. Remove the `//` characters at the start of that line and restart node-red.

---

<div class="post-metadata">

**Author:** ![mammoet](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@mammoet](https://discourse.nodered.org/u/mammoet)\
**Post date:** [18 May 2018 11:32 UTC](https://discourse.nodered.org/t/getting-image-in-dashboard/228/5 "2018-05-18T11:32:19Z")

</div>

Thanks for the help so far. but im still kinda stuck. i can now get the image to load on the localhost.  
but not in the dashboard while is used that template node with the provided code. and changed 'my-image’to the file name i wanted

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [18 May 2018 11:47 UTC](https://discourse.nodered.org/t/getting-image-in-dashboard/228/6 "2018-05-18T11:47:38Z")

</div>

Getting the image to load in the browser is a good first step.

1. what have you called your image file?

2. have you added the ui\_template node as suggested? What did you put in the template node?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [18 May 2018 12:00 UTC](https://discourse.nodered.org/t/getting-image-in-dashboard/228/7 "2018-05-18T12:00:28Z")

</div>

in the ui\_template node you should also select the add the head section option

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/b84a30b0ea470558e90b2e2ac9f7dec2a945ca71.png)

---

<div class="post-metadata">

**Author:** ![mammoet](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@mammoet](https://discourse.nodered.org/u/mammoet)\
**Post date:** [18 May 2018 12:13 UTC](https://discourse.nodered.org/t/getting-image-in-dashboard/228/8 "2018-05-18T12:13:35Z")

</div>

My image is called building.jpg

 ![template%20scrn](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/ce10888602495c8613c68c4692f02e4dbb114a9d.png)

---

<div class="post-metadata">

**Author:** ![mammoet](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@mammoet](https://discourse.nodered.org/u/mammoet)\
**Post date:** [18 May 2018 12:26 UTC](https://discourse.nodered.org/t/getting-image-in-dashboard/228/9 "2018-05-18T12:26:41Z")

</div>

i fixed it! 😃 forgot i had a template with the same code in a other tab to test it.

Thanks for the help .

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [1 June 2018 08:37 UTC](https://discourse.nodered.org/t/getting-image-in-dashboard/228/10 "2018-06-01T08:37:37Z")

</div>

I don’t like to butt in, but I am studying this and have a slight problem…

My screen size is 1368 x 768 and I don’t have images that size.

So if I have an image (say) 800 x 600… (yeah, sorry, I’m still a 4x3 person.) How do I stretch it to fit the screen?

I know that is a poor example, but I hope you get the idea.

Oh, and likewise, if I have a picture (say) 5300 x 3600… How do I shrink it down to fit 1:1 on the screen?

Until now I am getting a tile of the smaller image all over the screen.

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [1 June 2018 09:14 UTC](https://discourse.nodered.org/t/getting-image-in-dashboard/228/11 "2018-06-01T09:14:58Z")

</div>

@Trying_to_learn you need to use CSS to resize the image - lots of help to be found via Google, such as: [https://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only](https://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only)

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [1 June 2018 09:30 UTC](https://discourse.nodered.org/t/getting-image-in-dashboard/228/12 "2018-06-01T09:30:36Z")

</div>

You might also like to consider reducing the size of the image using some image processing software if the image is vastly larger than you need. Then it will not need to send the large image to the browser for it to reduce, so reducing network and processing overheads.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [1 June 2018 09:35 UTC](https://discourse.nodered.org/t/getting-image-in-dashboard/228/13 "2018-06-01T09:35:57Z")

</div>

Thanks both.

Colin, I only gave the sizes as examples. I accept I can reduce the size of the picture.  
There again, I could increase the size too.

If NR supports scaling, I would prefer to do it that way.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [1 June 2018 09:40 UTC](https://discourse.nodered.org/t/getting-image-in-dashboard/228/14 "2018-06-01T09:40:39Z")

</div>

> If NR supports scaling

This is about HTML/CSS sizing of an image on a webpage - nothing specific to Node-RED

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [1 June 2018 09:45 UTC](https://discourse.nodered.org/t/getting-image-in-dashboard/228/15 "2018-06-01T09:45:14Z")

</div>

I stand corrected.

Um… I’m gonna cop it for asking, but the link you gave.

I’m confused.

Ok, the person asked about doing what I want to do.  
There are answers.

I scroll down to the “preferred answer” and I don’t understand HOW that answer works.

CSS3 has a nice little attribute called background-size:cover.

This scales the image so that the background area is completely covered by the background image whilst maintaining aspect ratio. The entire area will be covered however part of the image may not be visible if the width/height of the resized image is too great

Yeah, great.

So is that “background-size:cover” added to the line with the image?

I’ve tried that and got no result.

Yeah, ok. I need to study more the commands and where they are put.

I guess a lot of this is showing me how little I know about all the languages.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [1 June 2018 09:47 UTC](https://discourse.nodered.org/t/getting-image-in-dashboard/228/16 "2018-06-01T09:47:06Z")

</div>

Much earlier in this topic, I shared this snippet:

```auto
<style>
    body {
        background-image: url("/my-image.png");
    }
</style>

```

That is a CSS stylesheet where you can add more CSS rules, for example:

```auto
<style>
    body {
        background-image: url("/my-image.png");
        background-size: cover;
    }
</style>

```

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [1 June 2018 09:54 UTC](https://discourse.nodered.org/t/getting-image-in-dashboard/228/17 "2018-06-01T09:54:07Z")

</div>

{{HUGS}}

I am really hoping that at some stage MY brain will kick in and start to associate things better than it is doing now.

Kudos to you.

---

<div class="post-metadata">

**Author:** ![karlbo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/karlbo/32/68793_2.png) [@karlbo](https://discourse.nodered.org/u/karlbo)\
**Post date:** [14 June 2018 17:11 UTC](https://discourse.nodered.org/t/getting-image-in-dashboard/228/18 "2018-06-14T17:11:50Z")

</div>

is it possible to display background image on the group node aswell?  
body will display it nicely in the background, but what ref do i use for the group node?

Best regards  
Karl

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [14 June 2018 17:17 UTC](https://discourse.nodered.org/t/getting-image-in-dashboard/228/19 "2018-06-14T17:17:50Z")

</div>

You need to set the group and widget background transparency. Probably via more css

---

<div class="post-metadata">

**Author:** ![karlbo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/karlbo/32/68793_2.png) [@karlbo](https://discourse.nodered.org/u/karlbo)\
**Post date:** [14 June 2018 17:23 UTC](https://discourse.nodered.org/t/getting-image-in-dashboard/228/20 "2018-06-14T17:23:11Z")

</div>

found it

ui-card-panel

Karl

[Next page](https://discourse.nodered.org/t/getting-image-in-dashboard/228.md?page=2)