Sections are having backgrounds and I didn't code them? Help!

HTML-CSS
1

I coded an animated background and in this animated background ive put sections now if i scroll these sections theres a nearly transparent background appearing thats ruining the whole animated background. Maybe it also the fault of the background but I have no idae heres the code. Please help me :slight_smile:

CSS:

.animation-area {
	background: lightblue;
	width: 100%;
	height: 100%;
}

.box-area {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.box-area li {
	position: absolute;
	display: block;
	list-style: none;
	width: 25px;
	height: 25px;
	background: rgba(255, 255, 255, 0.2);
	animation: animate 20s linear infinite;
	bottom: -150px;
}

.box-area li:nth-child(1) {
	left: 86%;
	width: 80px;
	height: 80px;
	animation-delay: 0s;
}
.box-area li:nth-child(2) {
	left: 12%;
	width: 30px;
	height: 30px;
	animation-delay: 1.5s;
	animation-duration: 10s;
}
.box-area li:nth-child(3) {
	left: 70%;
	width: 100px;
	height: 100px;
	animation-delay: 5.5s;
}
.box-area li:nth-child(4) {
	left: 42%;
	width: 150px;
	height: 150px;
	animation-delay: 0s;
	animation-duration: 15s;
}
.box-area li:nth-child(5) {
	left: 65%;
	width: 40px;
	height: 40px;
	animation-delay: 0s;
}
.box-area li:nth-child(6) {
	left: 15%;
	width: 110px;
	height: 110px;
	animation-delay: 3.5s;
}
@keyframes animate {
	0% {
		transform: translateY(0) rotate(0deg);
		opacity: 1;
	}
	100% {
		transform: translateY(-800px) rotate(360deg);
		opacity: 0;
	}
}


/* Sections */

#container {
    width: 100%;
    height: 100vh;
    text-align: center;
}

#container section{
    position: relative;
    width: 100%;
    height: 100%;
}

#container section#Home {
    background-color: transparent;
    z-index: 99;
}

#container section#Home h1 {
    color: white;
    display: inline-block;
    background-color: #4285F4;
    border-radius: 30px;
    padding: 5px;
    padding-left: 20px;
    padding-right: 20px;
    box-shadow: 7px 10px 10px 0px rgba(0,0,0,0.5);
    margin-top: 20px;
}

#container section#About {
    z-index: 2;
    margin: 0;
    padding: 0;
}

#container section#About h1 {
    color: white;
    display: inline-block;
    background-color: #4285F4;
    border-radius: 30px;
    padding: 5px;
    padding-left: 20px;
    padding-right: 20px;
    box-shadow: 7px 10px 10px 0px rgba(0,0,0,0.5);
    margin-top: 20px;
}

HTML:

<div id="container">
        <div class="animation-area">
            <ul class="box-area">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <section id="Home">
            <div class="animation-area">
                
                <h1 data-aos="fade-right" data-aos-duration="900">Home</h1>
                <ul class="box-area">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            
        </section>
        <section id="About">
            <div class="animation-area">
                <h1 data-aos="fade-right" data-aos-duration="900">About</h1>
                <ul class="box-area">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </section>
2

Just found it, it’s because of the position relative in #container section :slight_smile:

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.