Use <picture> for responsive background images

momentum-mod · May 27, 2024 · f84f360 · f84f360
1 parent 957863e
commit f84f360
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 12 deletions.
diff --git a/src/css/main.css b/src/css/main.css
@@ -75,15 +75,25 @@ header {
   height: 100vh;
 
   display: grid;
-  place-items: center;
-  position: relative;
+  > * {
+    width: 100%;
+    height: 100%;
+    grid-row: 1 / -1;
+    grid-column: 1 / -1;
+  }
 
-  /* TODO https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images */
-  background-image: url('/assets/images/BGLight.webp');
-  background-size: cover;
+  picture.background {
+    overflow: hidden;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: none;
+    }
+  }
+
+  div.hero {
+    justify-content: center;
 
-  .hero {
-    width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -278,15 +288,20 @@ main {
         height: 100%;
         top: 0;
         left: 0;
+        overflow: hidden;
 
         filter: grayscale(1) invert(1) brightness(0.5) contrast(0.2);
-        /* TODO: dynamic load */
-        background-image: url('/assets/images/BGLight.webp');
 
         z-index: -2;
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: none;
+        }
       }
 
-      & > .background-overlay {
+      &::after {
         position: absolute;
         width: 100%;
         height: 100%;

diff --git a/src/index.html b/src/index.html
@@ -25,6 +25,12 @@
 
   <body>
     <header>
+      <picture class="background">
+        <source media="(max-width: 1280px)" srcset="/assets/images/bg-light_1280x720.webp" />
+        <source media="(max-width: 1920px)" srcset="/assets/images/bg-light_1920x1080.webp" />
+        <source media="(min-width: 1921px)" srcset="/assets/images/bg-light_2560x1440.webp" />
+        <img src="/assets/images/bg-light_1920x1080.webp" alt="" />
+      </picture>
       <div class="hero">
         <img id="Logo" class="logo" src="/assets/images/logo.svg" alt="Momentum Mod's Titlecard Logo" />
         <h2 class="subheading" id="Subheading">A free first-person speedrunning game built on the Source engine</h2>
@@ -93,8 +99,12 @@ <h1></h1>
       </div>
 
       <div class="background-section">
-        <div class="background"></div>
-        <div class="background-overlay"></div>
+        <picture class="background">
+          <source media="(max-width: 1280px)" srcset="/assets/images/bg-light_1280x720.webp" />
+          <source media="(max-width: 1920px)" srcset="/assets/images/bg-light_1920x1080.webp" />
+          <source media="(min-width: 1921px)" srcset="/assets/images/bg-light_2560x1440.webp" />
+          <img src="/assets/images/bg-light_1920x1080.webp" alt="" />
+        </picture>
         <div class="fancy-border-top"></div>
         <section id="Features">
           <div class="header">

diff --git a/src/public/assets/images/bg-light_1280x720.webp b/src/public/assets/images/bg-light_1280x720.webp
diff --git a/src/public/assets/images/bg-light_1920x1080.webp b/src/public/assets/images/bg-light_1920x1080.webp
diff --git a/src/public/assets/images/BGLight.webp → ...lic/assets/images/bg-light_2560x1440.webp b/src/public/assets/images/BGLight.webp → ...lic/assets/images/bg-light_2560x1440.webp