diff --git a/core/profiles/demo_umami/config/install/core.entity_view_display.block_content.banner_block.default.yml b/core/profiles/demo_umami/config/install/core.entity_view_display.block_content.banner_block.default.yml
index 26b01cedd1..f63da66811 100644
--- a/core/profiles/demo_umami/config/install/core.entity_view_display.block_content.banner_block.default.yml
+++ b/core/profiles/demo_umami/config/install/core.entity_view_display.block_content.banner_block.default.yml
@@ -7,8 +7,10 @@ dependencies:
     - field.field.block_content.banner_block.field_media_image
     - field.field.block_content.banner_block.field_summary
     - field.field.block_content.banner_block.field_title
+    - image.style.scale_crop_7_3_large
   module:
     - link
+    - media
 id: block_content.banner_block.default
 targetEntityType: block_content
 bundle: banner_block
@@ -27,11 +29,13 @@ content:
     weight: 4
     region: content
   field_media_image:
-    type: entity_reference_entity_view
+    type: media_thumbnail
     label: hidden
     settings:
-      view_mode: scale_crop_7_3_large
-      link: false
+      image_link: ''
+      image_style: scale_crop_7_3_large
+      image_loading:
+        attribute: eager
     third_party_settings: {  }
     weight: 1
     region: content
diff --git a/core/profiles/demo_umami/themes/umami/css/components/blocks/banner/banner.css b/core/profiles/demo_umami/themes/umami/css/components/blocks/banner/banner.css
index c8d5db01f6..1b1bd80ddb 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/blocks/banner/banner.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/blocks/banner/banner.css
@@ -8,6 +8,8 @@
 }
 
 .block-type-banner-block .summary {
+  /* Establish stacking context to appear over absolutely positioned image. */
+  position: relative;
   margin: 1rem 4%;
 }
 
@@ -51,11 +53,8 @@
 /* Medium */
 @media screen and (min-width: 48rem) { /* 768px */
   .block-type-banner-block {
+    position: relative; /* Anchor absolutely positioned image. */
     background-color: #464646;
-    background-repeat: no-repeat;
-    background-position: left center;
-    background-size: cover;
-    /* Image ratio 7:3 */
   }
 
   .block-type-banner-block .block-inner {
@@ -76,18 +75,13 @@
     background: rgba(0, 0, 0, 0.42);
   }
 
-  .block-type-banner-block .field--name-field-media-image {
-    /**
-     * We need to ensure that the alt text on the image is accessible to
-     * screenreaders, so, when on large screens, let's give this the same CSS
-     * as the .visually-hidden class has.
-     */
-    position: absolute !important;
-    overflow: hidden;
-    clip: rect(1px, 1px, 1px, 1px);
-    width: 1px;
-    height: 1px;
-    word-wrap: normal;
+  .block-type-banner-block .field--name-field-media-image img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
   }
 }
 /* Large */
diff --git a/core/profiles/demo_umami/themes/umami/templates/components/banner-block/block--bundle--banner-block.html.twig b/core/profiles/demo_umami/themes/umami/templates/components/banner-block/block--bundle--banner-block.html.twig
index d23cc297bf..1a32b1a70c 100644
--- a/core/profiles/demo_umami/themes/umami/templates/components/banner-block/block--bundle--banner-block.html.twig
+++ b/core/profiles/demo_umami/themes/umami/templates/components/banner-block/block--bundle--banner-block.html.twig
@@ -35,9 +35,7 @@
   ]
 %}
 
-{% set background_image = file_url(content.field_media_image[0]['#media'].field_media_image.entity.uri.value) %}
-
-<div{{ attributes.addClass(classes) }} style="background-image: url({{ background_image }})">
+<div{{ attributes.addClass(classes) }}>
   <div class="block-inner">
     {{ title_prefix }}
     {% if label %}