90978: Responsive banner background image

src/themes/dspace/app/home-page/home-news/home-news.component.html

@@ -1,4 +1,4 @@
-<div class="background-image">
+<div class="background-image-container">
   <div class="container">
     <div class="jumbotron jumbotron-fluid">
       <div class="d-flex flex-wrap">
@@ -30,5 +30,10 @@
       </ul>
     </div>
   </div>
+  <picture class="background-image">
+    <source type="image/webp" srcset="assets/dspace/images/banner.webp 2000w, assets/dspace/images/banner-half.webp 1200w, assets/dspace/images/banner-tall.webp 768w">
+    <source type="image/jpg" srcset="assets/dspace/images/banner.jpg 2000w, assets/dspace/images/banner-half.jpg 1200w, assets/dspace/images/banner-tall.jpg 768w">
+    <img alt="" [src]="'assets/dspace/images/banner.jpg'"/><!-- without the []="''" Firefox downloads both the fallback and the resolved image -->
+  </picture>
   <small class="credits">Photo by <a href="https://www.pexels.com/@inspiredimages">@inspiredimages</a></small>
 </div>

src/themes/dspace/app/home-page/home-news/home-news.component.scss

@@ -2,12 +2,21 @@
   display: block;
   margin-top: calc(var(--ds-content-spacing) * -1);
 
-  div.background-image {
+  div.background-image-container {
     color: white;
-    background-color: var(--bs-info);
     position: relative;
-    background-image: url('/assets/dspace/images/banner.jpg');
+
-    background-size: cover;
+    .background-image > img {
+      background-color: var(--bs-info);
+      position: absolute;
+      z-index: -1;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: top;
+    }
 
     .container {
       position: relative;