diff --git a/layouts/partials/widgets/hero.html b/layouts/partials/widgets/hero.html
index 13fbc30a..f961c4c1 100644
--- a/layouts/partials/widgets/hero.html
+++ b/layouts/partials/widgets/hero.html
@@ -2,10 +2,10 @@
 {{ $page := .page }}
 {{ $header := $page.Params.header }}
 
-{{/* Compute image path outside of HTML style element due to Hugo limitation. */}}
+{{/* See Hugo note on linking assets in styles: https://github.com/gohugoio/hugoThemes#common-permalink-issues */}}
 {{ $overlay_img := "" }}
 {{ if $header.overlay_img }}
-  {{ $overlay_img = (printf "img/%s" $header.overlay_img) | relURL }}
+  {{ $overlay_img = printf "img/%s" $header.overlay_img | absURL }}
 {{end}}
 
 <section id="{{ $page.File.TranslationBaseName }}" class="hero-overlay" style="
diff --git a/layouts/partials/widgets/hero_carousel.html b/layouts/partials/widgets/hero_carousel.html
index e3da8da7..49a57343 100644
--- a/layouts/partials/widgets/hero_carousel.html
+++ b/layouts/partials/widgets/hero_carousel.html
@@ -20,7 +20,7 @@
       {{ if $item.overlay_img }}
       background-image:
       {{ if $item.overlay_filter }}linear-gradient(rgba(0, 0, 0, {{ $item.overlay_filter }}), rgba(0, 0, 0, {{ $item.overlay_filter }})), {{ end }}
-      url('{{ printf "/img/%s" $item.overlay_img | absURL }}');
+      url('{{ printf "img/%s" $item.overlay_img | absURL }}');
       {{ end }}
       ;">
       <div class="container" style="text-align: {{$item.align | default "left"}};">