From e6ccd01d443ebb74e4130a804f37f5c47e4e1538 Mon Sep 17 00:00:00 2001
From: Lorenz Stechauner <lorenz.stechauner@necronda.net>
Date: Thu, 16 May 2024 20:45:30 +0200
Subject: [PATCH] Fix background images for mobile devices

---
 www/index.xhtml   |  4 ++--
 www/res/style.css | 23 +++++++++++++++++------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/www/index.xhtml b/www/index.xhtml
index 7023cb8..8522d7c 100644
--- a/www/index.xhtml
+++ b/www/index.xhtml
@@ -54,7 +54,7 @@
       </p>
     </section>
 
-    <section class="picture-1"/>
+    <section class="picture-1 background"/>
 
     <section class="clients">
       <span id="genossenschaften"/>
@@ -64,7 +64,7 @@
       </p>
     </section>
 
-    <section class="picture-2"/>
+    <section class="picture-2 background"/>
   </main>
 
   <footer>
diff --git a/www/res/style.css b/www/res/style.css
index da7fa28..5d0cfda 100644
--- a/www/res/style.css
+++ b/www/res/style.css
@@ -69,25 +69,36 @@ table a {
     color: var(--main-color);
 }
 
+main .background {
+    background-image: var(--img);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-attachment: fixed;
+    background-size: cover;
+}
+
+@media screen and (max-width: 1024px) {
+    main .background {
+        background-attachment: unset;
+    }
+}
+
 main .home {
     height: 100vh;
-    background: url("/res/images/Italien-1.jpg") no-repeat bottom center fixed;
-    background-size: cover;
+    --img: url("/res/images/Italien-1.jpg");
 }
 
 main .picture-1 {
     width: 100%;
     margin: 0;
-    background: url("/res/images/Italien-2.jpg") no-repeat bottom center fixed;
-    background-size: cover;
+    --img: url("/res/images/Italien-2.jpg");
     height: 24em;
 }
 
 main .picture-2 {
     width: 100%;
     margin: 0;
-    background: url("/res/images/Italien-3.jpg") no-repeat bottom center fixed;
-    background-size: cover;
+    --img: url("/res/images/Italien-3.jpg");
     height: 24em;
 }