diff --git a/frontend/src/components/home/Hero.astro b/frontend/src/components/home/Hero.astro
index 6a65364..bc277b4 100644
--- a/frontend/src/components/home/Hero.astro
+++ b/frontend/src/components/home/Hero.astro
@@ -13,6 +13,7 @@ const lawyerImageUrl = "/images/home/avtourist-surgut.avif";
 ---
 
 <section class="hero-section">
+    <img src={bgImageUrl} alt="" class="hero-bg-image" fetchpriority="high" decoding="async" />
     <div class="hero-overlay"></div>
 
     <div class="site-container hero-grid">
@@ -67,14 +68,14 @@ const lawyerImageUrl = "/images/home/avtourist-surgut.avif";
     });
 </script>
 
-<style define:vars={{ bgImageUrl: `url("${bgImageUrl}")` }}>
+<style>
     .hero-section {
         position: relative;
         width: 100%;
         min-height: 100vh;
         display: flex;
         align-items: center;
-        background-image: var(--bgImageUrl);
+        background-image: url("/images/home/bg_hero.avif");
         background-size: cover;
         background-position: center;
 
@@ -84,6 +85,14 @@ const lawyerImageUrl = "/images/home/avtourist-surgut.avif";
         overflow: hidden;
     }
 
+    .hero-bg-image {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        opacity: 0;
+        pointer-events: none;
+    }
+
     .hero-overlay {
         position: absolute;
         top: 0; left: 0; width: 100%; height: 100%;