# Button with my picture

**URL:** <https://discourse.nodered.org/t/button-with-my-picture/92906>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [4 November 2024 17:26 UTC](https://discourse.nodered.org/t/button-with-my-picture/92906 "2024-11-04T17:26:37Z")\
**Posts on this page:** 1\
**Showing post:** 11

<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:** [9 November 2024 10:24 UTC](https://discourse.nodered.org/t/button-with-my-picture/92906/11 "2024-11-09T10:24:36Z")

</div>

By looking at your flow I see you are using FlowFuse Dashboard AKA Dashboard 2.0 but in your original post you stated:

> I use Dashboard 1

I guess you have updated? You should tag this post with #dashboard-2 to remove confusion

  

Next, your CSS is:

```auto
.round button {
    border-radius: 50%;
    background-image: url("/redbutton.png");
    background-size: cover;
    max-height: calc( 2 * var(--widget-row-height));
    min-height: calc( 2 *var(--widget-row-height));
    max-width: calc( 2 *var(--widget-row-height));
    min-width: calc( 2 *var(--widget-row-height));
}

```

1. How are you serving `"/redbutton.png"`?
2. Did you edit your settings.js to serve static content?
3. Have you tested the URL in your browser - to check that the image is actually being served?
  - e.g. if your Node-RED is at `http://localhost:1880` then try accessing `http://localhost:1880/redbutton.png` - do you see the image?

Alternatively, you could serve the image using `http-in` \> read file \> `http-response` nodes to avoid setting up http static. There is an example in the dashboard-2.0 ui-template docs see this recent post: [Display image in buffer in template node - #4 by Steve-Mcl](https://discourse.nodered.org/t/display-image-in-buffer-in-template-node/93001/4)

---

_[View the full topic](https://discourse.nodered.org/t/button-with-my-picture/92906)._