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

admin管理员组

文章数量:1124805

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.

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.

• html
• css

Share Improve this question Follow edited yesterday VMX asked yesterday VMXVMX 19511 silver badge99 bronze badges 1

• Please edit your post to include a minimal reproducible example. Use your browser inspector to extract the relevant parts of the generated code which the browser sees (different from your source code), then build a runnable example as a stack snippet. A link to your site might also be helpful, in addition to the minimal example. – Brett Donald Commented yesterday

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

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);
}

本文标签：