Most Parallax walkthroughs assume you either want the background image to remain still, or you want to do full-viewport images, then scroll to another full-viewport image. I don't want either of these thing, I just want my boring background image to have a bit more pizazz and scroll at a different rate.
To make a background image have a parallax effect and scroll slower than the content of the page (with only CSS) I placed the background image into a div with position: absolute and transform: translateZ(-3px). Then, to make it the right size again, I used scale(4). To make it start at the top of the image (with translateZ -3) I put top:-150vh, but all of this causes there to be a not insignificant amount of white-space at the end of the webpage as the image ends. I also have no idea how to make the image dynamically resize to fit the content of the page instead of height: 100% being precisely the size of 1 viewscreen. How can I make my background image behave like a background image and also fill the whole page?
This answer doesn't work as well as I want, because rapid scrolling with that javascript looks bouncy and Skrollr hasn't been supported in more than 5 years. Initially, I envisioned this project as a "back to roots" only vanilla JS, CSS, and HTML. I would rather do it this format if possible, but at this point I just want it to work, be performant, and as simple as possible.
I've tried negative margins and padding for both #background-pic and #background-pic:after for the white space and changing #page-container into a table and the two .parallax divs into tds so that they conform sizes, but that isn't working for me, though I don't have a lot of experience with tables in HTML. Here's basically what I have so far, sorry for the bloated HTML, but I wanted it to be scrollable. Notice the white space at the bottom and the non-dynamic background size.
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow-y: hidden;
}
#page-container {
perspective: 1px;
height: 100%;
width: 100%;
display: block;
padding: 0;
border: 0;
transform-style: preserve-3d;
overflow-x: hidden;
overflow-y: auto;
table-layout: fixed;
}
.parallax {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 0;
}
#background-pic {
background-image: url(http://www.freeimageslive.com/galleries/backdrops/wood/preview/bark.jpg);
background-repeat: repeat-y;
width: 100vw;
height: 100%;
top: -150vh;
left: 0;
position: absolute;
z-index: -1;
transform-origin: 50% 0%;
transform: translateZ(-3px) scale(4);
display: block;
overflow: hidden;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Parallax Fiddle</title>
</head>
<body>
<div id="page-container">
<div class="parallax">
<div id="background-pic"></div>
</div>
<div class="parallax">
<h1>Hello World!</h1>
<br />
<br />
<h3>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, et veritatis. Similique
ipsam saepe voluptatem perferendis possimus cumque voluptas asperiores accusamus in
dolorum. Iste culpa animi corporis ducimus repudiandae error!
</h3>
<br>
<br>
<h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam
laborum architecto, dolorem unde voluptatibus quam excepturi
laboriosam accusamus dolore in, est ea. Hic voluptatum pariatur
commodi sequi magni blanditiis velit.
</h3>
<br>
<br>
<h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam
laborum architecto, dolorem unde voluptatibus quam excepturi
laboriosam accusamus dolore in, est ea. Hic voluptatum pariatur
commodi sequi magni blanditiis velit.
</h3>
<br>
<br>
<h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam
laborum architecto, dolorem unde voluptatibus quam excepturi
laboriosam accusamus dolore in, est ea. Hic voluptatum pariatur
commodi sequi magni blanditiis velit.
</h3>
</div>
</div>
</body>
</html>