I designed a webpage with background images in a div featuring a slideshow and content display. Now, I'm facing an issue where any new sections I add after the background image end up positioned behind it, appearing at the top of the window as if there was no previous content on the page except for a sticky navbar. Below are the relevant code snippets.
I want to incorporate different parts into my webpage below the background image. Any suggestions on how to achieve this?
Note: My primary focus is on running this website in full-screen windows; please ignore any visual issues that arise in non-full-screen modes.
*,
*::before,
*::after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: aqua;
}
... (CSS code omitted for brevity)
<!doctype html>
<html>
<head>
... (Head section content omitted for brevity)
</head>
<body>
<header>
... (Header section content omitted for brevity)
</header>
<div class="container_slider">
... (Background image content omitted for brevity)
</div>
<div class="box"></div>
</body>
</html>