Seeking assistance in resolving an issue with my gradient background repeating on my webpage after reaching a certain point due to a large amount of content.
The page can be found at . Upon scrolling to the bottom, you'll notice an excessive amount of white space that I aim to reduce. While inspecting the code using Chrome Dev Tools, I came across an additional line of code that does not seem to correlate with any files in my HTML or CSS:
<div style="position: absolute; z-index: -10000; top: 0px; left: 0px; right: 0px; height: 1793px;"></div>This mysterious code and the repeated background issue do not occur on other pages, even when more content is added. The problem appears to be related to the "content" div, responsible for containing the text on the "About Me" page.
/*Main content area with text boxes - Used For About & Assignment Pages
content {
position: absolute;
width: 50vw;
height: 125vh;
left:0;
right:0;
top: 25vw;
border-radius: 2vw;
margin-bottom: 1vw;
margin-left:auto;
margin-right:auto;
background-color: #FFF;
-webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
}
Your insights and feedback would be highly valued,
Thank you, Josh