Set size of starry background to depend on screen width as well

andromeda.css

@@ -1,3 +1,4 @@
+/* Set size of logo, depending on orientation */
 @media (orientation: landscape) {
     :root {
         --logo-width: clamp(34.08em, 40vw, 56.89em);
@@ -12,6 +13,20 @@
     }
 }
 
+/* Set size of background, depending on screen width */
+@media (max-width: 100em) {
+    /* Set static graphic width on smaller screens */
+    :root {
+        --background-width: 100rem;
+    }
+}
+@media (min-width: 100em) {
+    /* Set graphic to width of screen */
+    :root {
+        --background-width: 100%;
+    }
+}
+
 /* ============================== */
 /*  Global
 /* ============================== */
@@ -24,27 +39,12 @@ body {
 }
 
 /* Add Milky Way graphic to header */
-@media (max-width: 100em) {
-    /* Set static graphic width on smaller screens */
-    .skinHeader {
-        --background-width: 100rem;
-    }
-}
-@media (min-width: 100em) {
-    /* Set graphic to width of screen */
-    .skinHeader {
-        --background-width: 100%;
-    }
-    /* Push content down from under graphic */
-    div.skinBody > div.page {
-        padding-top: 15rem !important;
-    }
-}
 .skinHeader {
     /* Position graphic behind header */
     margin-top: calc(-1 * (0.2202 * var(--background-width)));
     height: 100%;
     padding-top: calc(0.2202 * var(--background-width));
+    /* Add graphic */
     backdrop-filter: none !important;
     background-color: rgba(0, 0, 0, 0) !important;
     background-image: url("https://static.zomerkoningin.nl/andromeda/images/milkyway_header.webp");
@@ -52,6 +52,7 @@ body {
     background-size: var(--background-width) auto;
     background-position-x: center;
     background-position-y: top;
+    /* Pass-through clicks */
     pointer-events: none;
     /* Keep header visible when scrolling on phone */
     transform: unset !important;
@@ -60,13 +61,21 @@ body {
     flex-grow: 0 !important;
 }
 .skinHeader > * {
+    /* Limit pass-through to graphic only */
     pointer-events: auto;
 }
+@media (min-width: 100em) {
+    /* Push content down from under graphic on wider screens */
+    div.skinBody > div.page {
+        padding-top: 15rem !important;
+    }
+}
 
 /* Add starry background */
 .backdropContainer {
     background-image: url("https://static.zomerkoningin.nl/andromeda/images/nightsky.webp");
-    background-size: 100%;
+    background-size: var(--background-width) auto;
+    background-position: center center;
 }
 .backgroundContainer {
     display: none;