# Dashboard background image

**URL:** <https://discourse.nodered.org/t/dashboard-background-image/86173>\
**Category:** Dashboard\
**Created:** [5 March 2024 21:46 UTC](https://discourse.nodered.org/t/dashboard-background-image/86173 "2024-03-05T21:46:23Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Youssef](https://avatars.discourse-cdn.com/v4/letter/y/df788c/32.png) [@Youssef](https://discourse.nodered.org/u/Youssef)\
**Post date:** [5 March 2024 21:46 UTC](https://discourse.nodered.org/t/dashboard-background-image/86173/1 "2024-03-05T21:46:23Z")

</div>

i did all what they said  
changing httpstatic  
import image in a folder static  
write the css  
and also nothing appeard i don't know what's the problem  
can someone help me please and thank you

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [5 March 2024 22:26 UTC](https://discourse.nodered.org/t/dashboard-background-image/86173/2 "2024-03-05T22:26:57Z")

</div>

What do you have for httpStatic in settings.js?  
What CSS do you have and how are you applying it?

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [5 March 2024 23:20 UTC](https://discourse.nodered.org/t/dashboard-background-image/86173/3 "2024-03-05T23:20:12Z")

</div>

This appears to be the same question you asked in this post ?

> [@Background image](https://discourse.nodered.org/t/background-image/86171):
>
> Hi at all , i want to add a picture to background dashboard i read most of question i want to know how to changing http static and why when i want to oppen settings.js in my computer i haver error message

Please don't post multiple times on the same issue it just causes confusion.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [6 March 2024 00:31 UTC](https://discourse.nodered.org/t/dashboard-background-image/86173/4 "2024-03-06T00:31:19Z")

</div>

> [@Background Image Dashboard](https://discourse.nodered.org/t/background-image-dashboard/58130/8):
>
> You could also do it right inside NR using a dashboard template node with the following code:. \<style\> body { background-image: url("/Dashback\_2021a.jpg"); // file path background-repeat: no-repeat; background-size: auto; background-position: bottom left; } \</style\>

provided you have defined httpstatic correctly, the solution in the above link works.

---

<div class="post-metadata">

**Author:** ![Youssef](https://avatars.discourse-cdn.com/v4/letter/y/df788c/32.png) [@Youssef](https://discourse.nodered.org/u/Youssef)\
**Post date:** [7 March 2024 10:58 UTC](https://discourse.nodered.org/t/dashboard-background-image/86173/5 "2024-03-07T10:58:46Z")

</div>

![02](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/3/e39edbb7e9c69047ed9224e445399026f7c7a180.png)  
 ![Capture d'écran 2024-03-07 135257](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/b/7b12c71f10a3a717b273729bde575cbe520f76bd.png)  
 ![Capture d'écran 2024-03-07 135329](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/3/1351e31fdddbb0d665767741e6c56eeaf06125e1.png)

---

<div class="post-metadata">

**Author:** ![Youssef](https://avatars.discourse-cdn.com/v4/letter/y/df788c/32.png) [@Youssef](https://discourse.nodered.org/u/Youssef)\
**Post date:** [7 March 2024 11:00 UTC](https://discourse.nodered.org/t/dashboard-background-image/86173/6 "2024-03-07T11:00:25Z")

</div>

ok sorry i have this problem first and i solved it sorry again

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [7 March 2024 11:05 UTC](https://discourse.nodered.org/t/dashboard-background-image/86173/7 "2024-03-07T11:05:43Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/6/4664dc308b63bd723ac472529ac47af90c2af175.png)

the entry looks like still commented. //

---

<div class="post-metadata">

**Author:** ![Youssef](https://avatars.discourse-cdn.com/v4/letter/y/df788c/32.png) [@Youssef](https://discourse.nodered.org/u/Youssef)\
**Post date:** [7 March 2024 11:09 UTC](https://discourse.nodered.org/t/dashboard-background-image/86173/8 "2024-03-07T11:09:29Z")

</div>

what's mean ?

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [7 March 2024 11:11 UTC](https://discourse.nodered.org/t/dashboard-background-image/86173/9 "2024-03-07T11:11:06Z")

</div>

As well as @smanjunath211's point (remove the `//` from the start of the line):

Your CSS `background-image: url(\ship.png");` seems to be missing a quote.

I'm not sure about your use of `\` rather than `/` but I don't know if it's a problem.

---

<div class="post-metadata">

**Author:** ![Youssef](https://avatars.discourse-cdn.com/v4/letter/y/df788c/32.png) [@Youssef](https://discourse.nodered.org/u/Youssef)\
**Post date:** [7 March 2024 11:15 UTC](https://discourse.nodered.org/t/dashboard-background-image/86173/10 "2024-03-07T11:15:41Z")

</div>

![Capture d'écran 2024-03-07 141212](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/5/552e98ca2eb68af62ea91a87a9bc8ada9a1c4ec6.png)

 ![Capture d'écran 2024-03-07 141446](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/f/bf12298d3f2c03def89fdc4bf47ec5965f6f7127.png)

Same problem

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [7 March 2024 11:23 UTC](https://discourse.nodered.org/t/dashboard-background-image/86173/11 "2024-03-07T11:23:40Z")

</div>

I have seen a [suggestion](https://groups.google.com/g/node-red/c/KWvaZK5N208?pli=1) that you need to use double slash characters in settings.js for WIndows

`httpStatic: 'C:\\Users\\youse\\.node-red\\static',`

---

<div class="post-metadata">

**Author:** ![Youssef](https://avatars.discourse-cdn.com/v4/letter/y/df788c/32.png) [@Youssef](https://discourse.nodered.org/u/Youssef)\
**Post date:** [7 March 2024 11:26 UTC](https://discourse.nodered.org/t/dashboard-background-image/86173/12 "2024-03-07T11:26:39Z")

</div>

![Capture d'écran 2024-03-07 142511](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/9/799c7f6a10bc2f3fc044954c1cc4ba7c523fb49f.png)  
 ![Capture d'écran 2024-03-07 142531](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/c/4c4d50c08d7f40fb1cd8f6206f90c828f03eb1c6.png)  
 ![Capture d'écran 2024-03-07 142601](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/e/be75138f3831086cc1cb5441cea8d8bbd76fc1a0.png)  
nothing appeared

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [7 March 2024 11:29 UTC](https://discourse.nodered.org/t/dashboard-background-image/86173/13 "2024-03-07T11:29:13Z")

</div>

try as below

`httpStatic: 'c:/Users/youse/.node-red/static',`

Edited for correct syntax, was missing a comma

---

<div class="post-metadata">

**Author:** ![Youssef](https://avatars.discourse-cdn.com/v4/letter/y/df788c/32.png) [@Youssef](https://discourse.nodered.org/u/Youssef)\
**Post date:** [7 March 2024 11:35 UTC](https://discourse.nodered.org/t/dashboard-background-image/86173/14 "2024-03-07T11:35:37Z")

</div>

same thing

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [7 March 2024 11:40 UTC](https://discourse.nodered.org/t/dashboard-background-image/86173/15 "2024-03-07T11:40:54Z")

</div>

hope you are restarting node-red after changing settings file and saving it.

can you share your node-red startup log ?

---

<div class="post-metadata">

**Author:** ![Youssef](https://avatars.discourse-cdn.com/v4/letter/y/df788c/32.png) [@Youssef](https://discourse.nodered.org/u/Youssef)\
**Post date:** [7 March 2024 11:45 UTC](https://discourse.nodered.org/t/dashboard-background-image/86173/16 "2024-03-07T11:45:53Z")

</div>

yes i restart and save it  
i don't understand what you want me to share

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [7 March 2024 11:47 UTC](https://discourse.nodered.org/t/dashboard-background-image/86173/17 "2024-03-07T11:47:53Z")

</div>

how do you start node-red ?  
If from command prompt, then a series of messages appear share that (copy/paste)

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [7 March 2024 11:49 UTC](https://discourse.nodered.org/t/dashboard-background-image/86173/18 "2024-03-07T11:49:45Z")

</div>

like below

```auto
7 Mar 15:15:53 - [info] 

Welcome to Node-RED
===================

7 Mar 15:15:53 - [info] Node-RED version: v3.1.0-beta.2
7 Mar 15:15:53 - [info] Node.js version: v16.16.0
7 Mar 15:15:53 - [info] Windows_NT 10.0.19045 x64 LE
7 Mar 15:16:00 - [info] Loading palette nodes
7 Mar 15:16:05 - [info] Dashboard version 3.6.1 started at /ui
7 Mar 15:16:07 - [info] Settings file : C:\Users\OEEHo\NR-Live\settings.js
7 Mar 15:16:07 - [info] HTTP Static : C:\temp > /
7 Mar 15:16:07 - [info] Context store : 'memoryOnly' [module=memory]
7 Mar 15:16:07 - [info] Context store : 'file' [module=localfilesystem]
7 Mar 15:16:07 - [info] User directory : C:\Windows\system32\config\systemprofile

```

---

<div class="post-metadata">

**Author:** ![Youssef](https://avatars.discourse-cdn.com/v4/letter/y/df788c/32.png) [@Youssef](https://discourse.nodered.org/u/Youssef)\
**Post date:** [7 March 2024 11:51 UTC](https://discourse.nodered.org/t/dashboard-background-image/86173/19 "2024-03-07T11:51:23Z")

</div>

C:\Users\youse\>node-red  
Error loading settings file: C:\Users\youse.node-red\settings.js  
C:\Users\youse.node-red\settings.js:271  
diagnostics: {  
^^^^^^^^^^^

SyntaxError: Unexpected identifier 'diagnostics'  
at internalCompileFunction (node:internal/vm:77:18)  
at wrapSafe (node:internal/modules/cjs/loader:1288:20)  
at Module.\_compile (node:internal/modules/cjs/loader:1340:27)  
at Module.\_extensions..js (node:internal/modules/cjs/loader:1435:10)  
at Module.load (node:internal/modules/cjs/loader:1207:32)  
at Module.\_load (node:internal/modules/cjs/loader:1023:12)  
at Module.require (node:internal/modules/cjs/loader:1235:19)  
at require (node:internal/modules/helpers:176:18)  
at Object. (C:\Users\youse\AppData\Roaming\npm\node\_modules\node-red\red.js:140:20)  
at Module.\_compile (node:internal/modules/cjs/loader:1376:14)

C:\Users\youse\>

---

<div class="post-metadata">

**Author:** ![Youssef](https://avatars.discourse-cdn.com/v4/letter/y/df788c/32.png) [@Youssef](https://discourse.nodered.org/u/Youssef)\
**Post date:** [7 March 2024 11:52 UTC](https://discourse.nodered.org/t/dashboard-background-image/86173/20 "2024-03-07T11:52:40Z")

</div>

it's the first time appeared like that i thought closing node onglet only when i closed command prompt and resart appeared that for the first time

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