back to background image as picture was doing bad flickering

wri · Nov 21, 2024 · 6ef9630 · 6ef9630
1 parent 8bf0d39
commit 6ef9630
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 34 deletions.
diff --git a/components/ui/static-header.js b/components/ui/static-header.js
@@ -42,16 +42,10 @@ class StaticHeader extends React.Component {
     return (
       <div
         className={`c-static-header ${customClasses}`}
+        style={{
+          backgroundImage: `image-set(url(${background.replace('.jpg', '.webp')}) type('image/webp'), url(${background}) type('image/jpeg'))`,
+        }}
       >
-        <div className="c-static-background">
-          <picture>
-            {/* make sure webp image is also available */}
-            <source type="image/webp" srcSet={background.replace('.jpg', '.webp')} />
-            <source type="image/jpeg" srcSet={background} />
-            <img src={background} alt="" />
-          </picture>
-        </div>
-
         {tabs ? (
           <div className="wrapper">
             <div className="container">

diff --git a/css/components/page/_static-section.scss b/css/components/page/_static-section.scss
@@ -10,37 +10,38 @@
     height: 80vh;
     max-height: 720px;
   }
-}
-
-.c-static-background {
-  display: block;
-  overflow: hidden;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  box-sizing: border-box;
-  margin: 0;
 
-  img {
+  .c-static-background {
+    display: block;
+    overflow: hidden;
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     box-sizing: border-box;
-    padding: 0;
-    border: none;
-    margin: auto;
-    display: block;
-    width: 0;
-    height: 0;
-    min-width: 100%;
-    max-width: 100%;
-    min-height: 100%;
-    max-height: 100%;
-    object-fit: cover;
-    object-position: center;
+    margin: 0;
+
+    img {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      box-sizing: border-box;
+      padding: 0;
+      border: none;
+      margin: auto;
+      display: block;
+      width: 0;
+      height: 0;
+      min-width: 100%;
+      max-width: 100%;
+      min-height: 100%;
+      max-height: 100%;
+      object-fit: cover;
+      object-position: center;
+    }
   }
 }
+