How do I make the background image start at the top of the page and not below my sticky header?

First of all, apologies if this question is a bit stupid, as I'm not too knowledgeable in CSS yet. I've been searching for a while but couldn't find a solution that worked.

I've been doing some heavy modifications to a Hugo theme, and everything's working the way I want... except for the blur effect behind my sticky header.

First of all, a couple of recordings that describe the issue better than words can:

• Desktop
• Mobile

What I have here is a gradient that's used as a background image, defined like this in my site-wide theme:

    background-image: linear-gradient(38.73deg,
            rgb(0 37 204 / 25%) 0%,
            rgba(201, 32, 184, 0) 50%),
        linear-gradient(141.27deg,
            rgba(0, 70, 209, 0) 50%,
            rgb(174 0 209 / 25%) 100%);
    background-attachment: fixed;

Then my header CSS looks like this:

header {
    z-index: 10;
    position: sticky;
    top: 0;
    -webkit-backdrop-filter: blur(20px) saturate(0.8) !important;
    backdrop-filter: blur(20px) saturate(0.2) !important;
    --background-color: rgba(0, 0, 0, 0);
}

.showHeaderOnTop {
    box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
    top: 0;
    position: sticky;
}

As you can see, my transparent header and its blur effect work fine when scrolling through the middle of the page. However, when at the very top of the page, instead of the background image I can see the background color of the page through the header.

If you look at the mobile animation, you can see that when the header is expanded, that background gap expands with it too. So it looks like the background image always starts with a vertical gap from the top that's equal to the current height of the header.

Any ideas on how I could remove that gap and make the background image always start at the top of the page?

I apologize for not providing any HTML here, as this is a customized Hugo theme on top of some additional customizations... meaning the actual code is a mess, split all over the place and generated through different layout and partial files.

But if anybody could perhaps point me in the right direction on where I should be looking, that'd be a huge help.

Switching position from sticky to fixed for the header should make it "overlap" the background image, hope it helps!

header {
    z-index: 10;
    position: fixed;
    top: 0;
    -webkit-backdrop-filter: blur(20px) saturate(0.8) !important;
    backdrop-filter: blur(20px) saturate(0.2) !important;
    --background-color: rgba(0, 0, 0, 0);
}