I just recently got into HTML and CSS as a hobby, and want to try out parallax scrolling. I found a great tutorial that described exactly what I wanted to do, except for one small issue. As I am trying to reposition a logo over top of the parallax scrolling background, the div of the logo still remains at the top of the page, taking up the entire top of the page with white. I can't resize the height: 100% attribute in the global reset because when I do, the background image disappears entirely. If I try to resize the height in the other divs, the background image yet again disappears. Here is the code: index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Lumberjack Times | Home</title>
</head>
<body>
<div class="center"><img src="Images/Lumberjack.jpg" height="100" alt="" class="centerFace"></div>
<div class="doNotSize" id="background"></div>
<div class="text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
<script src="parallax.js" type="text/javascript"></script>
</body>
</html>
Here is my style.css:
* {
margin: 0;
border: 0;
height: 100%;
z-index: 1;
}
#background {
background-image: url("Images/Camping\ Ground.jpg");
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center - 300;
top: 200;
}
.center {
display:flex;
justify-content: center;
display:absolute;
}
.centerFace {
height: 400px;
display:absolute;
margin-top:60%;
clip-path: circle(200px at center);
}
And finally, the parallax script:
window.addEventListener("DOMContentLoaded", scrollLoop, false);
var backgroundImage = document.querySelector("#background");
var xScrollPos;
var yScrollPos;
function scrollLoop(e) {
xScrollPos = window.scrollX;
yScrollPos = window.scrollY;
setTranslate(0, yScrollPos * -0.2, backgroundImage);
requestAnimationFrame(scrollLoop);
}
function setTranslate(xPos, yPos, element) {
element.style.transform = "translate3d(" + xPos + ", " + yPos + "px, 0";
}
All very basic documents, but I cannot for the life of me find the issue! Does anyone know how I can fix this?
Image of the issue stated, top white box displays over the entire page
My main guess as to why this is happening is because I'm stating that all elements should have a height of 100% of the webpage, but if I do not do this, the background image does not show. I'm stumped, any help would be greatly appreciated!