insert image description here
Image dedicated to MrXQ
I require assistance in verifying the accuracy of the following code - all content displayed below has been altered from the original for privacy concerns
My objective is to have the headers scroll over the trollface, which is positioned one z-index lower than the headers. The trollface should remain stationary while the headers are visible initially on the screen. As you scroll up, the "test" text in the brown box should gradually appear from the bottom
I am uncertain if my approach is correct; I have incorporated concepts like parallax scrolling, fixed and relative positioning, and adjusting z-indexes for the headers. However, I am unsure about the terminology for bringing up the brown box from the bottom as you scroll; does it involve overlaying?
.parallax{
background-image: url("https://upload.wikimedia.org/wikipedia/en/thumb/9/9a/Trollface_non-free.png/220px-Trollface_non-free.png");
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
h1{
color: black;
font-family: 'Quicksand';
font-size: 50px;
text-align: center;
z-index: 1;
position: relative;
}
h2{
color: black;
font-family: 'Arial';
font-size: 25px;
text-align: center;
z-index: 1;
position: relative;
}
.textbody{
position: relative;
}
.textbodytext{
color: white;
font-family: 'Quicksand';
font-size: 50px;
text-align: center;
z-index: 2;
position: relative;
background: brown;
}<DOCTYPE! html>
<html>
<head>
<title>TITLE</title>
</head>
<link href="maintenance1.css" rel="stylesheet" type="text/css">
<body>
<div>
<body class="parallax"></body>
</div>
<div>
<body class="textbody">
<h1>This is a header</h1>
<h2>This is a smaller header</h2>
<p class="textbodytext">
Test test test test test Test test test test test Test test test test test Test test test test test Test test test test test Test test test test test Test test test test test Test test test test test Test test te...
</p>
</body>
</div>
</body>
</html>Relevant image provided in response to a commenter, options discussed in the comments
Update: After modifying the font-size of the brown box to 50px, I tested the confidential actual code and found that most parts of the background image were still visible, with the brown box covering key areas
Upon reflection, I now realize that I want only the background visible at first, centered with the headers, and then as you scroll up, the brown box should emerge from below the browser, initially invisible but becoming visible upon scrolling up