# Background on BlueMix

**URL:** <https://discourse.nodered.org/t/background-on-bluemix/234>\
**Category:** Dashboard\
**Created:** [18 May 2018 13:28 UTC](https://discourse.nodered.org/t/background-on-bluemix/234 "2018-05-18T13:28:08Z")\
**Posts on this page:** 10\
**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 13:28 UTC](https://discourse.nodered.org/t/background-on-bluemix/234/1 "2018-05-18T13:28:08Z")

</div>

Oke so i figuered out how i needed to create a background in my dashboard.  
now i was wondering how i can do the same on blue mix.

---

<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 13:41 UTC](https://discourse.nodered.org/t/background-on-bluemix/234/2 "2018-05-18T13:41:45Z")

</div>

In very much the same way…  
In your bluemix project there is a bluemix-settings.js file that already has httpStatic set to point to a folder called public within the project… - and that already contains an images folder. so you can add your image into there. And then add the template in your flow to point to /images/your\_image.jpg.

You will need to use the devops pipeline tools to add the image to that folder and redeploy your project to bluemix - but that is business as usual.

---

<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:** [22 May 2018 07:11 UTC](https://discourse.nodered.org/t/background-on-bluemix/234/3 "2018-05-22T07:11:00Z")

</div>

This may look like a stupid question but how do i acces the bluemix-settings.js

---

<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:** [22 May 2018 08:24 UTC](https://discourse.nodered.org/t/background-on-bluemix/234/4 "2018-05-22T08:24:00Z")

</div>

You use the devops pipeline tools - by enabling “Continuous Delivery” etc

---

<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:** [22 May 2018 09:06 UTC](https://discourse.nodered.org/t/background-on-bluemix/234/5 "2018-05-22T09:06:44Z")

</div>

@mammoet It isn’t a stupid question if you aren’t familiar with the IBM Cloud. To give a bit more of a complete answer…

On the IBM Cloud dashboard page for your application you should see a box in the bottom right corner titled ‘Continuous Delivery’. Within that box is an ‘Enable’ button that you should click, and then click ‘Create’ on the next page. That will create a Toolchain that links a git repository with your application.

Once it has been created, you’ll see a tile labelled “Eclipse Orion Web IDE” - click on that to go to the browser-based IDE for your application. It’ll show you the git repository for your app. You should see `bluemix-settings.js` in the list, click on it to open it.

You can then edit the file as you wish. **But** in this instance, the file already has `httpStatic` set and pointed to the `public` directory of the repository. You want to add your custom background image to the repository. To do that, in the left-hand panel listing your files, you should see the `public` directory. Right click on it and select `Import->File or Zip archive` - you can then upload the file you want to add from your local filesystem.

When you have finished, click the git button (all the way over on the left-hand edge of the screen, the icon between the pencil and cog.

This will show the changes you’ve made. Enter a commit message in the box provided and hit the ‘Commit’ button. The ‘Outgoing’ section on the left should now show the commit you’ve just created. Click the ‘Push’ button… and wait. The toolchain will take the change you’ve made and redeploy your node-red application (which will take a few minutes).

---

<div class="post-metadata">

**Author:** ![deekshaha](https://avatars.discourse-cdn.com/v4/letter/d/e47c2d/32.png) [@deekshaha](https://discourse.nodered.org/u/deekshaha)\
**Post date:** [5 July 2020 22:43 UTC](https://discourse.nodered.org/t/background-on-bluemix/234/6 "2020-07-05T22:43:34Z")

</div>

I have added images in the public/images folder in the ibm cloud. Can you please tell where exactly to put this code in Node-RED:  
`

 body { background-image: url("/images/maelstrom1600.jpg"); } `

I want to display it in Node RED Dashboard as soon as it is displayed.

---

<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:** [5 July 2020 22:53 UTC](https://discourse.nodered.org/t/background-on-bluemix/234/7 "2020-07-05T22:53:07Z")

</div>

@deekshaha there are lots of threads in this forum covering adding a background image using a ui\_template node. Have a search for those - will help you get started

---

<div class="post-metadata">

**Author:** ![a.beginner](https://avatars.discourse-cdn.com/v4/letter/a/e0b2c6/32.png) [@a.beginner](https://discourse.nodered.org/u/a.beginner)\
**Post date:** [24 July 2020 11:29 UTC](https://discourse.nodered.org/t/background-on-bluemix/234/8 "2020-07-24T11:29:00Z")

</div>

Hi @knolleary. Just went through our discussion.. Firstly, Thanks for the awesome guide, I just followed your steps though I am facing problems while displaying the image in my dashboard.. Hope the attached screenshots provide a better info. Thanks!

 ![Template](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/2/42f978dbcacd91376339ba7e8d0c853b870afdea.png)  
 ![UI](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/f/ef432291a5173a357dc009f8ec7e69fe15f899e9.png)

---

<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:** [24 July 2020 12:45 UTC](https://discourse.nodered.org/t/background-on-bluemix/234/9 "2020-07-24T12:45:43Z")

</div>

> [@a.beginner](#):
>
> Just went through our discussion..

What folder did you upload the image to in your node-red application?

I would expect you to have put them in `/public/images` alongside the other images in there - [node-red-app/public/images at master · IBM/node-red-app · GitHub](https://github.com/IBM/node-red-app/tree/master/public/images)

Have you tried accessing the image directly in your browser to check that bit is working before you do the Dashboard parts?

---

<div class="post-metadata">

**Author:** ![a.beginner](https://avatars.discourse-cdn.com/v4/letter/a/e0b2c6/32.png) [@a.beginner](https://discourse.nodered.org/u/a.beginner)\
**Post date:** [25 July 2020 05:33 UTC](https://discourse.nodered.org/t/background-on-bluemix/234/10 "2020-07-25T05:33:08Z")

</div>

Thanks for your kind response. @knolleary

 ![git](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/9/e9bd4a9ed058327981e89cdf99312f641182b32b.png)

> [@knolleary](#):
>
> I would expect you to have put them in `/public/images` alongside the other images in there - [node-red-app/public/images at master · IBM/node-red-app · GitHub](https://github.com/IBM/node-red-app/tree/master/public/images)

Yeah.. I have uploaded my file in the same location as you have mentioned..

> [@knolleary](#):
>
> Have you tried accessing the image directly in your browser to check that bit is working before you do the Dashboard parts?

I tried by using the git link too in the template node but I wasn't able to display the image, so where and what did I miss now..! 😭