Issue #2938187 by markconroy, andrewmacpherson: Homepage/Recipes page banner image is duplicating on small screens

core/profiles/demo_umami/themes/umami/css/components/blocks/banner/banner.css

@@ -3,15 +3,8 @@
  * This file is used to style the banner block.
  */
 
-.cover-image {
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center center;
-}
-
 .block-banner-block {
   background-size: 0 0;
-  background-position: 0 0;
 }
 
 .block-banner-block .summary {
@@ -56,8 +49,10 @@
 /* 768px */
 @media screen and (min-width: 48rem) { /* 768px */
   .block-banner-block {
+    background-color: #464646;
     background-size: cover;
     background-position: left center;
+    background-repeat: no-repeat;
     /* Image ratio 7:3 */
   }
 

core/profiles/demo_umami/themes/umami/templates/components/banner-block/block--bundle--banner-block.html.twig

@@ -35,7 +35,9 @@
   ]
 %}
 
-<div{{ attributes.addClass(classes) }} style="background-image: url({{ file_url(content.field_banner_image.0['#item'].entity.uri.value) }})">
+{% set background_image = file_url(content.field_banner_image.0['#item'].entity.uri.value) %}
+
+<div{{ attributes.addClass(classes) }} style="background-image: url({{ background_image }})">
   <div class="block-inner">
     {{ title_prefix }}
     {% if label %}
@@ -45,7 +47,7 @@
     {% block content %}
       {{ content.field_banner_image }}
       <div class="summary">
-        {{ content }}
+        {{ content|without('field_banner_image') }}
       </div>
     {% endblock %}
   </div>