[QUESTION] How to link an image for background?

[shimizurei]

Question

I'm trying to add my custom background to Dashy, but I can't figure out the best method to do so.

These don't work:

backgroundImg: "/volume1/docker/dashy/assets/bg.jpg" (for Synology)"
backgroundImg: "/dashy/assets/bg.jpg"
backgroundImg: "/assets/bg.jpg"
backgroundImg: "assets/bg.jpg"
backgroundImg: "./assets/bg.jpg"

I tried following this part in the Theming doc, to no avail.

Do I need to add something to my config file? I'm afraid of breaking something and I'm not the most savvy with docker/docker-compose.

Category

Configuration

Please tick the boxes

• You are using a supported version of Dashy (check the first two digits of the version number)
• You've checked that this question hasn't already been raised
• You've checked the docs and troubleshooting guide
• You agree to the code of conduct

[Lissy93]

So there's actually an option called backgroundImg under appConfig, which you can just pass a (local or remote) URL to. You can place any local assets in the public directory, and use / to access them.

But if you want to continue with CSS, then put your images anywhere within the public folder, and then you can access them from the root of the domain. For example, if you image was in public/assets/bg.png, you can reference it with /assets/bg.png. Don't forget paths are case sensitive ;)

Hope that helps :)

[shimizurei]

Still having a bit of trouble.

Here is my appConfig:

appConfig:
  layout: "auto"
  iconSize: "medium"
  theme: "thebe"
  defaultOpeningMethod: "newtab"
  backgroundImg: "/assets/bg.jpg"

and here is my dockercompose.yml:

version: '3.8'
services:
  dashy:
    image: ghcr.io/lissy93/dashy:latest
    container_name: Dashy
    volumes:
      - /volume1/docker/dashy/dashyconfig.yml:/app/public/conf.yml
      - /volume1/docker/dashy/assets/dashycsstweaks.css:/app/src/styles/user-defined-themes.scss
      - /volume1/docker/dashy/assets/bg.jpg:/app/public/assets/bg.jpg
    ports:
      - xxx:80
    environment:
      - NODE_ENV=production
      - UID=xxx
      - GID=xxx
    restart: unless-stopped
    healthcheck:
      test: ['CMD', 'node', '/app/services/healthcheck']
      interval: 1m30s
      timeout: 10s
      retries: 3
      start_period: 40s

Background still doesn't show up. I just can't figure it out.

[Lissy93]

So if you open up your dev tools, you should see the path that's being accessed by that image. Try visiting https://[location-of-dashy]/bg.jpg - does your image show up? If not, jump into your container, and check it's actually been mounted correctly.

[shimizurei]

WTF...?

So, I went to https://[location-of-dashy]/assets/bg.jpg and found the bg. Then I went back and dove into DevTools and copied and pasted the same link into the background-image css. (I did background-image: url(/assets/bg.jpg).) And it works????

Should it not be working then with the way my appConfig is???

[shimizurei]

It works now. I don't know why, but I updated the image and it started working.

[ribas89]

This feature does not completely replace the background of an existing theme. To do that, follow the instructions here:

#1296 (comment)