From 10899480896ad8e1272bcb9f0fcf34ba25a51cc5 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Tue, 3 Sep 2019 13:18:26 +0200
Subject: [PATCH] Lovelace background theme (#10283)

* Remove background from examples

* Update views.markdown
---
 source/lovelace/views.markdown     | 25 ++++++++++++++-----------
 source/lovelace/yaml-mode.markdown |  5 -----
 2 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/source/lovelace/views.markdown b/source/lovelace/views.markdown
index eb548cfbe2b..90521bd346b 100644
--- a/source/lovelace/views.markdown
+++ b/source/lovelace/views.markdown
@@ -103,17 +103,6 @@ This renders the first card on full width, other cards in this view will not be
         - zone.home
 ```
 
-## Background
-
-Style the background of views using [CSS](https://en.wikipedia.org/wiki/Cascading_Style_Sheets). For wallpapers you probably want to use the example below, more options can be found [here](https://developer.mozilla.org/en-US/docs/Web/CSS/background).
-
-### Example
-
-```yaml
-- title: Living room
-  background: center / cover no-repeat url("/local/background.png") fixed
-```
-
 ## Themes
 
 Set a separate [theme](/components/frontend/#themes) for the view and its cards.
@@ -124,3 +113,17 @@ Set a separate [theme](/components/frontend/#themes) for the view and its cards.
 - title: Home
   theme: happy
 ```
+
+### Background
+
+You can style the background of your views with a [theme](/components/frontend/#themes). You can use the CSS variable `lovelace-background`. For wallpapers you probably want to use the example below, more options can be found [here](https://developer.mozilla.org/en-US/docs/Web/CSS/background).
+
+#### Example
+
+```yaml
+# Example configuration.yaml entry
+frontend:
+  themes:
+    example:
+      lovelace-background: center / cover no-repeat url("/local/background.png") fixed
+```
diff --git a/source/lovelace/yaml-mode.markdown b/source/lovelace/yaml-mode.markdown
index b2685c491ea..d37598aabff 100644
--- a/source/lovelace/yaml-mode.markdown
+++ b/source/lovelace/yaml-mode.markdown
@@ -38,16 +38,11 @@ resources:
   - url: /local/my-webfont.css
     type: css
 
-# Optional background for all views. Check https://developer.mozilla.org/en-US/docs/Web/CSS/background for more examples.
-background: center / cover no-repeat url("/background.png") fixed
-
 views:
     # View tab title.
   - title: Example
     # Unique path for direct access /lovelace/${path}
     path: example
-    # Optional background (overwrites the global background).
-    background: radial-gradient(crimson, skyblue)
     # Each view can have a different theme applied. Theme should be defined in the frontend.
     theme: dark-mode
     # The cards to show on this view.