READING TIME: 6 MINUTES
In this guide, I’m going to show you how to create animated backgrounds in Home Assistant. Most Lovelace dashboards have a default color set by the theme you’ve chosen. If you want to spice up your dashboards a little, you can follow this tutorial to set your backgrounds based on an entity.
For example, if you are using your thermometer as the entity, then you can have your dashboard display a video background of rain falling when the state changes to
Changing these backgrounds are also reflected in iOS and Android when using the Home Assistant Companion app, so that’s pretty cool as well.
If you’ve never installed a custom theme before, you can follow my How To Install Home Assistant Themes guide.
Let’s get started!
- To use animated backgrounds, I recommend installing HACS. (If installing manually, you can follow the instructions on the developers wiki.) I’m going to assume most of you already have HACS, or the Home Assistant Community Store, installed. For this guide, I’m installing this integration via HACS.
- For this example, I am using my Ecobee thermostat. If you don’t have a smart thermostat, you can choose any entity you’d like. You will need to know the available states for whatever entity you choose.
The developers docs are a bit outdated, so I’m expanding on them in this guide. You won’t need to reference his doc at all to set this up as long as you follow my guide exactly.
Step 1: Install Lovelace Animated Background in HACS
Log into Home Assistant. On your sidebar, go to HACS > Frontend > Explore & Add Repositories.
Then, search for “Lovelace Animated Background”.
On the popup screen, click Install This Repository in HACS.
After installing, click Reload.
Step 2: Add Custom Element to Lovelace UI
Next, go to your primary Lovelace dashboard. In the top right corner, click the 3 dots > Edit Dashboard.
Click the 3 dots again and go to Raw Configuration Editor.
In this file (the
ui_lovelace.yaml), you’ll see all the code that makes up your different Lovelace dashboards and views.
Scroll to the very bottom.
Copy the code below and paste it on a brand new line. You will need to change the entity in green to the name of your thermostat entity.
To find your weather entity name, go to Configuration > Entities > search for “weather”.
animated_background: default_url: "https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4" # This entity is just an example. You can states of any entity you want. entity: "weather.my_ecobee" state_url: 'sunny': - "https://cdn.flixel.com/flixel/hlhff0h8md4ev0kju5be.hd.mp4" - "https://cdn.flixel.com/flixel/zjqsoc6ecqhntpl5vacs.hd.mp4" - "https://cdn.flixel.com/flixel/jvw1avupguhfbo11betq.hd.mp4" - "https://cdn.flixel.com/flixel/8cmeusxf3pkanai43djs.hd.mp4" - "https://cdn.flixel.com/flixel/guwb10mfddctfvwioaex.hd.mp4" 'partlycloudy': - "https://cdn.flixel.com/flixel/13e0s6coh6ayapvdyqnv.hd.mp4" - "https://cdn.flixel.com/flixel/aorl3skmssy7udwopk22.hd.mp4" - "https://cdn.flixel.com/flixel/qed6wvf2igukiioykg3r.hd.mp4" - "https://cdn.flixel.com/flixel/3rd72eezaj6d23ahlo7y.hd.mp4" - "https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4" - "https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4" 'cloudy': - "https://cdn.flixel.com/flixel/13e0s6coh6ayapvdyqnv.hd.mp4" - "https://cdn.flixel.com/flixel/aorl3skmssy7udwopk22.hd.mp4" - "https://cdn.flixel.com/flixel/qed6wvf2igukiioykg3r.hd.mp4" - "https://cdn.flixel.com/flixel/3rd72eezaj6d23ahlo7y.hd.mp4" - "https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4" - "https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4" 'mostlycloudy': - "https://cdn.flixel.com/flixel/e95h5cqyvhnrk4ytqt4q.hd.mp4" - "https://cdn.flixel.com/flixel/l2bjw34wnusyf5q2qq3p.hd.mp4" - "https://cdn.flixel.com/flixel/rrgta099ulami3zb9fd2.hd.mp4" 'clear-night': - "https://cdn.flixel.com/flixel/x9dr8caygivq5secll7i.hd.mp4" - "https://cdn.flixel.com/flixel/v26zyfd6yf0r33s46vpe.hd.mp4" - "https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4" - "https://cdn.flixel.com/flixel/rosz2gi676xhkiw1ut6i.hd.mp4" 'fog': - "https://cdn.flixel.com/flixel/vwqzlk4turo2449be9uf.hd.mp4" - "https://cdn.flixel.com/flixel/5363uhabodwwrzgnq6vx.hd.mp4" 'rainy': "https://cdn.flixel.com/flixel/f0w23bd0enxur5ff0bxz.hd.mp4"
In the top right corner, click Save.
Then, close the Raw Config Editor.
Step 3: Test It Out!
You’re new live Home Assistant Lovelace animated background should start playing automatically!
Every time you refresh your dashboard, it should cycle to a new live wallpaper. If there are 5 URL’s set to a state, then it should cycle between those 5 .mp4’s.
Step 4: More testing: Manually Changing Entity State
If you look at the code in Step 3, you’ll see there are already videos hardcoded for each state. The
default_url is the fallback URL if the state can’t be found. (should be a space animated background).
You can copy any of those URL’s into a browser to see what they look like. Feel free to delete any you don’t like.
Manually Change States
For example, my Ecobee state is currently sunny, so it should show one of the URL’s in the “sunny” section of the code.
To check for yourself, go to Developer Tools > States.
Filter by your entity. As you can see, my state is currently sunny.
If you’d to see a different animated background appear (such as one for the rainy state), while you are still in the Developer Tools > States tab, choose your entity and type in the state. Then click Set State.
You can now refresh your background and it should show the video URL specified for the rainy section. (should display a lake with light rain)
Optional: Adding Custom Video Backgrounds
To upload your own animated background, first you need to have a video file or download one. There’s a number of sites that have free to download .mp4’s, but the one I’m using for this example is from here: https://www.ignitemotion.com/video/clouds/looping-clouds/
Once you have your video file downloaded, you need to upload it to Home Assistant.
File Editor > click the folder at the top
Scroll down to the
www folder. Create a new folder called backgrounds.
Then, click into the backgrounds folder. Locate the up arrow to upload a new file and browse to the newly download file. Then click OK.
Next, go back to your primary Lovelace dashboard > 3 dots > Raw Configuration Editor again. Scroll all the way down again until you locate the section of you code you copied in during Step 2.
I’m uploading this to my “sunny” state and deleting all the defaults.
The path you would use is
Save the changes again, and then go to your dashboard. It should now show your custom animated background!
Hopefully you guys thought this was as cool as I did! Now that this is setup, I can think of all kids of ways to automate changing my backgrounds.
In a future post, I’m going to change my backgrounds based on the season (For example, show a snowy background in Winter or a Halloween background in Autumn.)
My Favorite Home Assistant Devices
Below are some of the Home Assistant-compatible devices I personally use in my home. I highly recommend each of them.
- Zwave/Zigbee hub: Nortek GoControl HUSBZB-1
- Smart Plugs: Securifi Peanut plugs
- Motion Sensors: Hue Indoor Motion
- Outdoor Camera: Amcrest IP5M Turret
- Robot Vacuum: Roborock S7
The full list of all Home Assistant compatible & recommended devices I use can be found on my Equipment List page.
Smart Home Product Finder
What hub do you currently use?
What product are you looking to add?
Garage Door Opener
Motion, Door & Window, Leak