Parallax hero image turns grey after window resize / DevTools

Question

I’m using jQuery Stellar to create a parallax hero at the top of the page.

<!-- HERO -->
<div class="site-blocks-cover"
 data-stellar-background-ratio="0.5">
 <div class="container h-100 d-flex flex-column
 justify-content-center align-items-center text-center">
 <h1 class="mb-4 hero-text hero-text-size hero-shadow spacing">
 Apartment close to Old Town
 </h1>
 <p class="mb-5 hero-text hero-shadow">
 Address, 8700, abc
 </p>
 <p><a href="https://example.com"
 class="btn btn-primary px-5 py-3">Book now</a></p>
 </div>
</div>

/* overlay & basic styling */
.site-blocks-cover {
 min-height: 600px;
 height: 100vh;
 background-position: center top;
 background-size: cover;
 background-repeat: no-repeat;
 position: relative;
}
.site-blocks-cover::before { /* dark overlay */
 content: "";
 position: absolute;
 inset: 0;
 background: rgba(0,0,0,.4);
}

// parallax initialisation
$(window).stellar({
 responsive: true,
 parallaxBackgrounds: true,
 parallaxElements: true,
 horizontalScrolling: false,
 hideDistantElements: false,
 scrollProperty: 'scroll'
});

What actually happens

1. Load the page.
2. Scroll down (e.g. ~600 px – hero section is now far above the viewport).
3. Resize the browser window or open DevTools (F12).

As soon as the resize event fires the hero’s background turns solid grey (only the semi‐transparent overlay remains) from the top of the page down to the current scroll position.

Refreshing the page fixes it until the next resize.

What I’ve found so far

• Stellar updates background-position on every resize so that the parallax ratio stays correct.
• During its re‐calculation it takes the current scrollTop into account.
• Because I’m scrolled 600 px already, Stellar moves the background up by > 600 px, effectively sliding the entire image out of the element’s box.

The pseudo‐element overlay stays put → I only see the dark overlay, which looks like a grey block.

Questions

How do I fix the problem with the grey background on scroll? I really prefer this effect over CSS: background‐attachment: fixed. I tried with $(window).stellar('refresh'), but it didn't work and doesn't seem like a solution (but maybe is). I feel like I'm running out of options.