diff --git a/sass/_utils.scss b/sass/_utils.scss
index 96bf1c2cd1b3c2643c2aacdf308d3bf9c201ff8d..e23718ac361a74ce14034cbef26fed798cff0d15 100644
--- a/sass/_utils.scss
+++ b/sass/_utils.scss
@@ -1,4 +1,5 @@
 @use "./teckids";
+
 .image.is-70p {
   width: 70%;
   height: 70%;
@@ -43,17 +44,9 @@ figure.image>figcaption {
       opacity: 0.6;
 
       bottom: -20vh;
-      .box {
-        color: black;
-      }
 
-    }
-    .container.is-transparent {
-      bottom: 0 !important;
-      opacity: 1;
       .box {
-        background: none;
-        box-shadow: none;
+        color: black;
       }
     }
   }
@@ -66,7 +59,21 @@ figure.image>figcaption {
     height: 100%;
   }
 
-  img.hero-background.is-transparent {
-    opacity: 0.3;
+  &.is-transparent {
+    .hero-body {
+      .container {
+        bottom: 0 !important;
+        opacity: 1;
+
+        .box {
+          background: none;
+          box-shadow: none;
+        }
+      }
+    }
+
+    img.hero-background.is-transparent {
+      opacity: 0.3;
+    }
   }
 }
diff --git a/templates/shortcodes/hero_section.html b/templates/shortcodes/hero_section.html
index db42bc08ccddb9268ef1d613b10eb4b7a5b2fd8b..4b580150edb694313cbd36a7f67c78039fe31474 100644
--- a/templates/shortcodes/hero_section.html
+++ b/templates/shortcodes/hero_section.html
@@ -1,10 +1,10 @@
-<section class="hero is-fullheight-with-navbar {% if background_img %}has-background{% endif %}">
+<section class="hero is-fullheight-with-navbar {% if background_img %}has-background{% endif %} {% if background_transparent %}is-transparent{% endif %}">
   {% if background_img %}
     {% set image = resize_image(path="@/" ~ page.colocated_path ~ "/" ~ background_img, width=800, height=600) -%}
-  <img class="hero-background {% if background_transparent %}is-transparent{% endif %}" src="{{ image.url }}" alt="">
+  <img class="hero-background" src="{{ image.url }}" alt="">
   {% endif -%}
   <div class="hero-body pl-0 pr-0">
-    <div class="container has-text-centered  {% if background_transparent %}is-transparent{% endif %}">
+    <div class="container has-text-centered">
       <div class="box is-radiusless">
         <h1 class="title is-1 mb-5">
           {% if page.extra.title.image -%}