Did you know you can add a custom image as the background to your self-hosted Homer dashboard? It’s pretty simple and easy to do (you can actually see an example of this on the Homer github page), but just in case you missed this like I did – I’m going to show you how to do this.
This guide assumes you already have Homer dashboard installed.
Find a Background Image
First, you need to find a suitable background image. I have a greenish style to my dashboard, so I’m going to go with a forest background. I’ve had good luck just googling “awesome background wallpapers”, but there’s thousands of websites out there. Any .jpg or .png image will work for this.
Once downloaded, add the file to your /assets/tools/ directory. If using VSCode, the easiest way to add images to Homer is to download the SSH addon. This allows you to simply drag and drop images into that directory.
My filename is called forest-bg.jpeg and will be dragged/dropped here:
Edit the Config.yml file
Next, edit Homer’s config.yml file.
Scroll down until you find the colors: section. Then, add this line of code:
background-image: "/assets/tools/forest-bg.jpeg"
You’ll notice I purposely didn’t add a background to the light background; only the dark one. I don’t really use the light-theme anyway, but if I did, this dark background would clash with my color scheme. If I decide to use an image background for Homer on my light theme, I’ll end up choosing a picture that is lighter in color.
After that, just save the config file and load up you dashboard! If all goes well, you should now see your image as the background! I’m not super happy with the image I chose for this example, but I just wanted to quickly show you guys the process of adding a custom image background to Homer.
Quick Tip: If your image doesn’t load right away, press CTRL+F5 to clear and reload your browser cache.
My Homelab Equipment
Here is some of the gear I use in my Homelab. I highly recommend each of them.
- Server 2019 w/ Hyper-V
- Case: Fractal Design Node 804
- Graphics Card: NVIDEA Quadro K600
- CPU: AMD Ryzen 7 2700
The full list of server components I use can be found on my Equipment List page.
Hi danny, i’m trying to put the background but i can’t yet i followed all the steps. I leave you some screenshots.
https://i.imgur.com/hddhMxj.png https://i.imgur.com/z3MsJQV.png https://i.imgur.com/xrGqZh7.png
Did you restart your Homer container or clear the browser cache / try a different browser afterwards?