diff --git a/src/html/mod_custom/default.php b/src/html/mod_custom/default.php
index 5e03a50..501c3b4 100644
--- a/src/html/mod_custom/default.php
+++ b/src/html/mod_custom/default.php
@@ -25,8 +25,9 @@ $headerClass = htmlspecialchars($params->get('header_class', ''), ENT_COMPAT, 'U
 if ($params->get('backgroundimage')) {
     /** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
     $wa = $app->getDocument()->getWebAssetManager();
+    $bgUrl = Uri::root(true) . '/' . HTMLHelper::_('cleanImageURL', $params->get('backgroundimage'))->url;
     $wa->addInlineStyle(
-        '#' . $modId . '{background-image: url("' . Uri::root(true) . '/' . HTMLHelper::_('cleanImageURL', $params->get('backgroundimage'))->url . '");}',
+        '#' . $modId . '{--hero-bg-image: url("' . $bgUrl . '"); background-image: var(--hero-bg-image);}',
         ['name' => $modId]
     );
 }