Bellcom theme: Enabling hero bg image with overlay

Author: Simon L. Lange

web/themes/custom/subsites/bellcom_theme/src/scss/sections/hero.scss

@@ -5,6 +5,8 @@
   align-items: center;
   padding: 80px 0;
 
+
+
   .hero__inner-wrapper {
     max-width: 1440px;
     margin: 0 auto;

web/themes/custom/subsites/bellcom_theme/templates/paragraphs/paragraph--landingpage_hero_banner.html.twig

@@ -2,7 +2,7 @@
 <div class="hero-wrapper" style="background-color:{% if selectedBackground == 'black' %} #212529;
 {% elseif selectedBackground == 'white' %} #fff; {% elseif selectedBackground == 'green' %} #344E41
 {% elseif selectedBackground == 'blue' %} #22223B; {% elseif selectedBackground == 'grey' %} #343A40;
-{% elseif selectedBackground == 'sand' %} #DAD7CD; {% endif %}">
+{% elseif selectedBackground == 'sand' %} #DAD7CD; {% endif %} {% if paragraph.field_hero_bg_image.value %} background:linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url({{ file_url(paragraph.field_hero_bg_image.entity.fileuri) }}); background-size: cover; {% endif %}">
   <div class="hero__inner-wrapper">
     <div class="hero__text-wrapper">
       {% if paragraph.field_hero_heading.value  %}