Fix backgrounds again.. (#948)

package.json

@@ -115,5 +115,8 @@
       "eslint --cache --format=node_modules/eslint-formatter-pretty"
     ],
     "*.css": "stylelint"
+  },
+  "volta": {
+    "node": "20.16.0"
   }
 }

src/pages/collection/Series.tsx

@@ -150,12 +150,12 @@ const Series = () => {
       <Outlet context={{ fanart, scrollRef } satisfies SeriesContextType} />
 
       <div
-        className="fixed left-0 top-0 -z-10 w-full bg-cover bg-center opacity-5"
+        className="fixed left-0 top-0 -z-10 w-full bg-cover bg-fixed opacity-5"
         // If this height feels like a hack, you figure out how to fix it
-        // 48px accounts for the top and bottom padding of the container
+        // 3rem accounts for the top and bottom padding of the container (1.5rem each side)
         style={{
           backgroundImage: fanart ? `url('${getImagePath(fanart)}')` : undefined,
-          height: containerBounds.height + 48,
+          height: `calc(${containerBounds.height}px + 3rem)`,
         }}
       />
     </div>

src/pages/settings/SettingsPage.tsx

@@ -192,10 +192,13 @@ function SettingsPage() {
           )}
       </div>
       <div
-        className="fixed left-0 top-0 -z-10 w-full bg-cover bg-center opacity-20"
+        className="fixed left-0 top-0 -z-10 w-full bg-cover bg-fixed opacity-20"
         // If this height feels like a hack, you figure out how to fix it
-        // 48px accounts for the top and bottom padding of the container
-        style={{ backgroundImage: 'url(/api/v3/Image/Random/Fanart)', height: containerBounds.height + 48 }}
+        // 3rem accounts for the top and bottom padding of the container (1.5rem each side)
+        style={{
+          backgroundImage: 'url(/api/v3/Image/Random/Fanart)',
+          height: `calc(${containerBounds.height}px + 3rem)`,
+        }}
       />
     </div>
   );