How To Create Animated Backgrounds in Home Assistant

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 rainy.

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!

---

Prerequisites:

1. 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.
2. 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 /local/backgrounds/Clouds.mp4

Save the changes again, and then go to your dashboard. It should now show your custom animated background!

---

Wrapping Up

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.)