Watermark overflow hidden

I have a “main” content area of my website, I’m trying to place a watermark inside it using the before pseudo element and using my website name. I also want it to be hidden when I don’t have much content on the page.

Currently when I have no text inside my before element and no content on my page my website uses the full screen height as deigned. When I add website name it shows below my footer and my footer is where it should be. It’s almost like the overflow hidden isn’t working.

Any ideas?

“`

.container{
display: grid;
grid-template-rows: 18px 80px 40vh auto 200px;
grid-template-columns: auto;
grid-template-areas: “info”
“header”
“banner”
“maincontent”
“footer”;
margin: 0;
padding: 0;
}

.content{
grid-area: maincontent;
min-height: 300px;
}

.content::before{
content: ‘Website Name’;
position: absolute;
color: rgba(0,0,0,0.04);
font-size: 25em;
font-weight: 900;
z-index: -1;
overflow: hidden;
}

“`

Also in #CSS _↴