What Sets Gatsby Header Height?

[Damn-Yankee]

Hi Folks,

I inherited a Gatsby site http://graingertnhistory.com and I have no knowledge of Gatsby, nor do I have the development environment - I am rewriting manually; see here: http://imheuristic.com. The original site had a header image with and overlay to allow the Title and Nav to pop. I moved the Title and Nav to a Sticky Header below the image. My problem is on a large viewport, the Title Popup for the image only appears on the L & R sides of the image. Worse, as you shrink the browser and the L & R sides are gone, the Tooltip is unavailable.

I found that that position:absolute in the .global-header .bg div is the culprit. However, this is needed to contain the image vertically - removing it blows the image to full size in that direction. It nor its parent containers have no height specified.

What don't I get here? What do I need to do to constrain the height yet not have what is presumably a child overlaying the center of the image?

The pertinent CSS is here:
[.global-header {

--tw-gradient-from: rgba(234,179,8,.75);

--tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to,rgba(234,179,8,0));

--tw-gradient-stops: var(--tw-gradient-from),#475569,var(--tw-gradient-to,rgba(71,85,105,0));

--tw-gradient-to: #475569;

}

.global-header .bg {

height: 100%;

left: 0;

/mix-blend-mode: overlay; This, if active adds above fade/

position: absolute;

top: 0;

width: 100%;

filter: sepia(40%);

}

.global-header .wrapper {

align-items: flex-start; /starts first div at upper right/

display: flex;

flex-direction: column;

gap: 1rem;

padding: 16rem 1rem 1rem;

position: relative

}]

HTML is here:
`

const t = "undefined" != typeof HTMLImageElement && "loading"in HTMLImageElement.prototype; if (t) { const t = document.querySelectorAll("img[data-main-image]"); for (let e of t) { e.dataset.src && (e.setAttribute("src", e.dataset.src), e.removeAttribute("data-src")), e.dataset.srcset && (e.setAttribute("srcset", e.dataset.srcset), e.removeAttribute("data-srcset")); const t = e.parentNode.querySelectorAll("source[data-srcset]"); for (let e of t) e.setAttribute("srcset", e.dataset.srcset), e.removeAttribute("data-srcset"); e.complete && (e.style.opacity = 1, e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity = 0) } } </script>

`

No, I haven't saved the image for Responsive Image rendering - just plopped it in, and I boogered the code at the end with the last two divs to get height in the image because I don't know what I am doing. It has been 25 years...

Any ideas as to how to handle this through code only?

Thanks,
John