Currently, I'm tasked with developing an educational website using HTML and CSS for a school project. Unfortunately, due to restrictions on code.org, I cannot utilize JavaScript files or script tags. Despite successfully implementing a parallax effect, the main issue lies in the fixed background image being duplicated on the scrolling page. You can view the website by clicking on the link provided below.
Project Link
When scrolling, the page moves up with a duplicate background. My goal is to make this background transparent.
body {
background-image: url(paper.jpg);
font-family: 'Kalam';
}
p {
color: black;
font-size: 20px;
}
h1 {
font-weight: bold;
}
.parallax {
background-image: linear-gradient();
min-height: 600px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.glow {
font-size: 32px;
color: #000000;
text-align: center;
animation: glow 1s ease-in-out infinite alternate;
}
@-webkit-keyframes glow { ... }
li {
font-size: 2
}<!DOCTYPE html>...</html>If anyone could offer assistance, it would be immensely appreciated. Thank you, Randy
I've attempted to remove the background using background-color: transparent;, but it reverts the page to standard scrolling functionality. Adjusting opacity has also proven unsuccessful as it disrupts the parallax effect.