How to center align/center parallax scrolling content? - html

Question

I am using a simple parallax scrolling effect however I am running into two problems.
I cannot have the #background stay centered while zooming in and out. If i change the position to relative it will, but it needs to remain fixed to create the parallax effect.
the #nav container is sitting above the background and if i completely remove the #nav container the background will drop to the bottom of the page. I would like the #nav bar to sit on top of the background ultimately creating the same idea in this website: http://www.falve.co.nz/collection/
Below is my code
<div id="page-wrap">
<div id="background"><img src="../images/COVER PHOTO.JPG" width="97%" height="97%"></div>
<nav id="nav">Nav</nav>
<div id="main">"MAIN BODY</div>
CSS
#page-wrap{
position: relative;
min-width: 1366px;
max-width: 2048px;
margin: 0px auto;
width: 100%;
}
#nav {
margin: 0;
height: 0px;
background: #fff;
position: relative;
}
#main {
margin: 1000px 0 0 0;
height: 1200px;
background: #fff;
position: relative;
}
#background {
position: fixed;
margin: auto;
left: 50px;
width: 98%;
height: 97%;
}
JS
<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.stellar.min.js"></script>
<script>$(function() {
$(window).on('scroll', function() {
$('#background').css('margin-top', $(window).scrollTop() * -.3);
});
});
</script>

Answer 1

Option #1 (related to your code):
There are some basics missing. For example closing div of page-wrap.
Basically you can set a background for your header and play with it.
With little conditions you can do the same trick with the nav
if ($(this).scrollTop() > 200) {
$("#nav").fadeOut();
} else {
$("#nav").stop().fadeIn();
}
See your Example
Option #2 (Recommended):
I would recommend using a special plugin (skrollr) for parallax related stuff. You can do a lot more with lot more options with individual support.
There is a tutorial section as well.
I hope I helped you with my first answer here.