Add background image in template node on a website

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.

[{"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"]]}]

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.

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

I updated my comment above.