Simple Header and Footer Parallax Effect
Let’s take your basic header->content->footer structure inside of a wrapper.
The first thing you’ll need to do is set the position of the header and footer fixed to the top and bottom respectively with a
z-index of -1 to push it below the regular page content. And although I’m sure you are already CSS-normalizing, for the example we will specifically toss the body margin.
Next we’ll give the content a minimum height to avoid having the footer lost in space in our example, a solid background color so it can eat stuff, and a
z-index of 1 so it’ll sit on top.
Now we set the wrapper margin off the top and bottom the same size as the header and footer.