Как сделать так, чтобы фоновое изображение начиналось вверху страницы, а не под прикрепленным заголовком? ⇐ Html

[Anonymous]

Прежде всего, прошу прощения, если вопрос покажется немного глупым, поскольку я еще не слишком разбираюсь в CSS. Я долго искал, но не смог найти подходящего решения.
Я внес несколько серьезных изменений в тему Hugo, и все работает так, как я хочу. .. за исключением эффекта размытия позади моего липкого заголовка.
Прежде всего, пара записей, которые описывают проблему лучше, чем слова:

• Компьютерный компьютер
• Мобильный

У меня есть градиент, который используется в качестве фонового изображения и определяется следующим образом в моей теме для всего сайта:< /p>

Код: Выделить всё

    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;

Тогда мой CSS-заголовок выглядит так:

Код: Выделить всё

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

Как видите, мой прозрачный заголовок и его эффект размытия отлично работают при прокрутке середины страницы. Однако, находясь в самом верху страницы, вместо фонового изображения я вижу цвет фона страницы через заголовок.
Если вы посмотрите в мобильной анимации вы можете видеть, что когда заголовок расширяется, вместе с ним увеличивается и фоновый разрыв. Похоже, что фоновое изображение всегда начинается с вертикального промежутка сверху, равного текущей высоте заголовка.
Есть идеи о том, как можно удалить этот зазор и сделать фон изображение всегда начинается в верхней части страницы?
Прошу прощения за то, что не предоставил здесь HTML-код, так как это настраиваемая тема Hugo с некоторыми дополнительными настройками... то есть фактический код это беспорядок, разбросанный повсюду и созданный с помощью разных макетов и частичных файлы.
Но если бы кто-нибудь мог указать мне правильное направление, где мне следует искать, это было бы огромной помощью.

Подробнее здесь: https://stackoverflow.com/questions/793 ... t-below-my