Sticky header background

Signed-off-by: Julius Härtl <jus@bitgrid.net>

diff --git a/apps/dashboard/src/App.vue b/apps/dashboard/src/App.vue
index fdf9f1e716f7cb176af6c4e4313db465a6e0dc43..32179f66313df9729f7cd08477291bc5c02357f2 100644 (file)
--- a/apps/dashboard/src/App.vue
+++ b/apps/dashboard/src/App.vue
@@ -162,6 +162,13 @@ export default {
                                }
                        }
                },
+               backgroundImage: {
+                       immediate: true,
+                       handler() {
+                               const header = document.getElementById('header')
+                               header.style.backgroundImage = `url(${this.backgroundImage})`
+                       },
+               },
        },
        mounted() {
                setInterval(() => {
@@ -242,7 +249,10 @@ export default {
 <style lang="scss">
 // Show Dashboard background image beneath header
 #body-user #header {
-       background: none;
+       background-size: cover;
+       background-position: center 50%;
+       background-repeat: no-repeat;
+       background-attachment: fixed;
 }
 
 #content {