# Add background image in template node on a website

**URL:** <https://discourse.nodered.org/t/add-background-image-in-template-node-on-a-website/64791>\
**Category:** General\
**Created:** [7 July 2022 08:51 UTC](https://discourse.nodered.org/t/add-background-image-in-template-node-on-a-website/64791 "2022-07-07T08:51:16Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![NeetaJ](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/neetaj/32/60934_2.png) [@NeetaJ](https://discourse.nodered.org/u/NeetaJ)\
**Post date:** [7 July 2022 08:51 UTC](https://discourse.nodered.org/t/add-background-image-in-template-node-on-a-website/64791/1 "2022-07-07T08:51:16Z")

</div>

Hi,

I want to add a background image for this website. The image is on my local computer. How to i reference to it in node red and also when it is published how can that image be available to everyone. How do i make the image public on node red.

Below is my flow.

```auto
[{"id":"bd1f3c8f0f1d6e12","type":"template","z":"95c455e1841b6220","name":"index","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html class=\"desktop-menu-open\" lang=\"en\" theme=\"dark\">\n\n<head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\" />\n \n\n\n <script src=\"https://cdn.jsdelivr.net/npm/js-yaml@3.11.0/dist/js-yaml.min.js\"></script>\n <!-- jQuery from CDN -->\n <script src=\"https://unpkg.com/dayjs\"></script>\n <script src=\"https://code.jquery.com/jquery-3.5.1.min.js\"></script>\n <!--Vue and Axios and Lodash Javascript-->\n <script src=\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"></script>\n <script src=\"https://cdn.jsdelivr.net/npm/vue-fragment\"></script>\n <script src=\"https://unpkg.com/vue-form-json-schema\"></script>\n <script>\n Vue.use(Fragment.Plugin);\n </script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.js\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js\"></script>\n\n <!--EU4IA's Basecoat Vue Components Javascript-->\n <!--<script src=\"https://unpkg.com/@eu4ia/bc-components\"></script>-->\n <script src=\"https://unpkg.com/@eu4ia/bc-components@0.0.45/dist/BasecoatComponents.umd.js\"></script>\n <!--Chart js-->\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js\"></script>\n <script src=\"https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@0.1.1\"></script>\n \n <!--<script src=\"https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js\"></script>-->\n\n <!--Vue Table-->\n <script src=\"https://unpkg.com/vuetable-2@1.6.0\"></script>\n <!--SMTP-->\n <script src=\"https://smtpjs.com/v3/smtp.js\"></script>\n <style type=\"text/css\">\n .panel-footer {\n background: #444c55;\n }\n\n .panel,\n .panel-group,\n .panel-heading,\n .panel-footer,\n .panel-body,\n .panel-collapse {\n border-radius: 7px !important;\n }\n\n .panel {\n margin-bottom: 5px !important;\n }\n\n .panel-body {\n padding-bottom: 5px !important;\n }\n </style>\n \n</head>\n\n<body>\n <div id=\"app\">\n <div class=\"desktop-menu-layout mobile-menu-layout sticky-footer-layout\">\n <div id=\"pageTop\"></div>\n <bc-menu display=\"desktop\" :selected=\"activeMenu\" v-slot=\"{ selected }\">\n \n </bc-menu>\n \n \n <!-- Page Wrapper -->\n <main class=\"page-wrapper\">\n{{{content}}}\n </main>\n\n <!-- Site Footer -->\n <footer class=\"site-footer\">\n <div class=\"row\">\n <div class=\"col-xs-12\">\n <p class=\"footer-copyright\"></p>\n <ul class=\"list-inline footer-links\"></ul>\n </div>\n </div>\n </footer>\n\n <!-- Mobile Menu -->\n <bc-menu display=\"mobile\" :selected=\"activeMenu\" v-slot=\"{ selected }\">\n {{{menu}}}\n </bc-menu>\n </div>\n\n </div>\n</body>\n\n<script>\n{{{vue}}}\n</script>\n\n\n\n</html>","output":"str","x":970,"y":180,"wires":[["675d7a6d11188464"]]}]

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [7 July 2022 08:56 UTC](https://discourse.nodered.org/t/add-background-image-in-template-node-on-a-website/64791/2 "2022-07-07T08:56:41Z")

</div>

You have a couple of options

You can serve any file using HTTP in and HTTP out nodes (ie create an endpoint)  
Search the flows library and see endpoints in the cookbook.

Or you can use a static path, set in settings.js to serve static content.  
See the docs for how to setup.

Both of these options are discussed and resolved many times over in the forum.

---

<div class="post-metadata">

**Author:** ![NeetaJ](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/neetaj/32/60934_2.png) [@NeetaJ](https://discourse.nodered.org/u/NeetaJ)\
**Post date:** [7 July 2022 08:57 UTC](https://discourse.nodered.org/t/add-background-image-in-template-node-on-a-website/64791/3 "2022-07-07T08:57:59Z")

</div>

Could you please give me an example. It would help me to understand

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [7 July 2022 08:58 UTC](https://discourse.nodered.org/t/add-background-image-in-template-node-on-a-website/64791/4 "2022-07-07T08:58:56Z")

</div>

I updated my comment above.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [5 September 2022 08:59 UTC](https://discourse.nodered.org/t/add-background-image-in-template-node-on-a-website/64791/5 "2022-09-05T08:59:03Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
