title: body needs to be in front of parallax image
body: <p>I have 2 problems.     </p>
  
  <ol>
  <li>I have a parallax image problem where the content-wrapper doesn't go over the image.   </li>
  <li>I have a js function where the text fades in if you scroll past a certain point, it doesnt work anymore since i started using the parallax.</li>
  </ol>
  
  <p>If anyone could help I would be so gratefull..!!
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    //Smooth scrolling - - - - - - - - - - - -    
    // Add smooth scrolling to all links
    $("a").on('click', function(event) {
      // Make sure this.hash has a value before overriding default behavior
      if (this.hash !== "") {
        // Prevent default anchor click behavior
        event.preventDefault();
        // Store hash
        var hash = this.hash;
        // Using jQuery's animate() method to add smooth page scroll
        // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
        $('html, body').animate({
          scrollTop: $(hash).offset().top - 500
        }, 800, function() {
          // Add hash (#) to URL when done scrolling (default click behavior)
          window.location.hash = hash;
        });
      } // End if
    });
  
  
    /*
      parallax background - - - - - - - - -
   var movementStrength = 25;
   var height = movementStrength / $(window).height();
   var width = movementStrength / $(window).width();
   $(".header").mousemove(function(e) {
    var pageX = e.pageX - ($(window).width() / 2);
    var pageY = e.pageY - ($(window).height() / 2);
    var newvalueX = width * pageX * -1 - 25;
    var newvalueY = height * pageY * -1 - 50;
    $('.header').css("background-position", newvalueX + "px     " + newvalueY + "px");
   });
   */
  
    //Navbar - - - - - - - - - - - - - - - 
    var menuItemsContainer = $(".js-fadeIn-right")
    var menuItems = menuItemsContainer.find('li')
    var length = menuItems.length
    for (var i = 0; i &lt; length; i++) {
      (function() {
        var j = i;
        var delay = 200 * (j + 1)
        setTimeout(function() {
          $(menuItems[j]).addClass('fadeIn-right')
        }, delay)
      }())
    }
  })
  var fadeInScroll = (function(win, doc) {
    var sections = [];
    var elSections;
    var settings = {
      fadeInOffset: 100 // How far into the page it should be, before fading in
    }
  
    var sel = {
      section: '.js-section',
      header: '.js-header',
      copy: '.js-copy'
    };
  
    var activeClass = 'is-active';
    var events = {
      scroll: 'scroll'
    }
  
    init();
  
    function init() {
      getSectionFromTopofPage();
      bindEvents()
    }
  
    function getSectionFromTopofPage() {
      elSections = doc.querySelectorAll(sel.section);
      var lenSections = elSections.length;
      for (var i = 0; i &lt; lenSections; i++) {
        sections.push({
          offset: elSections[i].offsetTop,
          element: elSections[i]
        });
      }
    }
  
    function getWindowHeight() {
      return Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    }
  
    function bindEvents() {
      var windowHeight = getWindowHeight();
      window.addEventListener(events.scroll, function(e) {
        for (var i = 0; i &lt; sections.length; i++) {
          if ((window.pageYOffset + windowHeight - settings.fadeInOffset) &gt; sections[i].offset) {
            var headerEl = sections[i].element.querySelector(sel.header);
            var copyEl = sections[i].element.querySelector(sel.copy);
            headerEl.classList.add(activeClass);
            copyEl.classList.add(activeClass);
          }
        }
      })
    }
  })(window, window.document);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*----- IMPORT -----*/
  
  @import url(/css/keyframes.css);
  @import url(/css/navbar.css);
  @import url(/css/footer.css);
  @import url(/css/header.css);
  @import url(/css/buttons.css);
  
  /*----- IMPORT -----*/
  
  a {
    color: orange;
    text-decoration-line: none;
    font-size: 20px;
    transition: color 0.1 ease;
  }
  
  a:hover {
    color: black;
    text-decoration-line: none;
  }
  
  .content-wrapper a {
    color: orange;
    text-decoration-line: none;
    transition: color 1s ease;
    font-size: 16px;
  }
  
  w .content-wrapper a:hover {
    color: black;
    text-decoration-line: none;
  }
  
  .image {
    border-radius: 49%;
    float: right;
    z-index: 98;
    max-width: 100%;
  }
  
  html {
    margin: 0;
    padding: 0;
  }
  
  body {
    background-color: #F1F1F1;
    margin: 0;
    padding 0;
    font-family: 'Merriweather', serif;
    display: block;
  }
  
  .intro1 {
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  .intro2 {
    font-weight: bold;
    margin-top: 10px;
  }
  
  p {
    margin-top 0px;
    margin-bottom: 50px;
    color: #666666;
    margin-right: 10px;
  }
  
  h3 {
    margin-top: 20px;
    margin-bottom: 0px;
  }
  
  #container {
    max-width: 1200px;
    width: 100%;
    min-height: 1000px;
    background-color: white;
    margin: 80px auto;
    margin-top: 0px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 10px;
  }
  
  .content-wrapper {
    padding: 8%;
    padding-top: 20px;
    line-height: 2;
    font-family: 'Roboto', sans-serif;
  }
  
  h3 {
    font-family: 'Anton', sans-serif;
    letter-spacing: 5px;
    font-size: 30px;
    padding-bottom: 0px;
    margin: 0 0px;
  }
  
  .footer {
    color: #87848D;
    text-align: center;
    padding-bottom: 5px;
  }
  
  .info-block {
    transition: all 1.5s ease;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
  }
  
  s .info-block .js-header {
    width: 50%;
    opacity: 0;
    transition: all 2.5s ease;
    -webkit-transform: translate3d(-100px, 0, 0);
    -moz-transform: translate3d(-100px, 0, 0);
    -ms-transform: translate3d(-100px, 0, 0);
    -o-transform: translate3d(-100px, 0, 0);
    transform: translate3d(-100px, 0, 0);
  }
  
  .info-block .js-copy {
    opacity: 0;
    transition: all 2.5s ease;
    -webkit-transform: translate3d(100px, 0, 0);
    -moz-transform: translate3d(100px, 0, 0);
    -ms-transform: translate3d(100px, 0, 0);
    -o-transform: translate3d(100px, 0, 0);
    transform: translate3d(100px, 0, 0);
  }
  
  .info-block .js-copy.is-active,
  .info-block .js-header.is-active {
    opacity: 1;
    -webkit-transform: translate3d(0px, 0, 0);
    -moz-transform: translate3d(0px, 0, 0);
    -ms-transform: translate3d(0px, 0, 0);
    -o-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0);
  }
  
  
  /*--- header ---*/
  
  
  /*---- HEADER ----*/
  
  .header {
    color: white;
    width: 100%;
    font-size: 50px;
    text-align: center;
    text-shadow: 4px 4px #000;
    padding: 0px 0;
    margin-top: 0px;
    font-family: sans-serif;
    /* background-image: url(/images/amsterdam.jpg) -25px -50px; */
    background-size: calc(100% + 50px);
    background-repeat: no-repeat;
    transform-style: preserve-3d;
  }
  
  .sub-header {
    padding-top: 0px;
    font-size: 30px;
    color: white;
    text-align: center;
    text-shadow: 2px 2px #000;
    letter-spacing: normal;
  }
  
  .header img {
    width: 100%;
    transform: translateZ(-1px) scale(2);
  }
  
  .header h2 h4 {
    position: relative;
  }
  
  body {
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100vh;
    perspective: 1px;
    position: relative;
  }
  
  html {
    overflow: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;link href="/css/main.css" rel="stylesheet" type="text/css"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Merriweather:400,700,900" rel="stylesheet"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Roboto:400,700,700i" rel="stylesheet"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Sedgwick+Ave+Display" rel="stylesheet"&gt;
    &lt;link href="/images/Png/r.png" rel="icon"&gt;
    &lt;meta content="width=device-width, initial-scale=1.0" name="viewport"&gt;
  
    &lt;title&gt;RubensWebsite&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="menu"&gt;
      &lt;div class="js-fadeIn-right"&gt;
        &lt;ul&gt;
          &lt;li&gt;
            &lt;a href="#About-Me"&gt;About Me&lt;/a&gt;
          &lt;/li&gt;
  
  
          &lt;li&gt;
            &lt;a href="#What-Do-I-Do"&gt;What do I do&lt;/a&gt;
          &lt;/li&gt;
  
  
          &lt;li&gt;
            &lt;a href="#How-I-Work"&gt;How I Work&lt;/a&gt;
          &lt;/li&gt;
  
  
          &lt;li&gt;
            &lt;a href="#Projects"&gt;Projects&lt;/a&gt;
          &lt;/li&gt;
  
  
          &lt;li&gt;
            &lt;a href="#Who-I-Work-With"&gt;Who I work with&lt;/a&gt;
          &lt;/li&gt;
  
  
          &lt;li&gt;
            &lt;a href="#Experiences"&gt;Experiences&lt;/a&gt;
          &lt;/li&gt;
  
  
          &lt;li&gt;
            &lt;a href="#Contact"&gt;Contact&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="header" id="header"&gt;
      &lt;img src="images/Header_Images/amsterdam.jpg"&gt;
      &lt;h2 class="fadeIn-up"&gt;Ruben Nijhuis&lt;/h2&gt;
  
  
      &lt;h4 class="sub-header fadeIn-down"&gt;"A Front-End Developer"&lt;/h4&gt;
    &lt;/div&gt;
  
  
    &lt;div id="container"&gt;
      &lt;div class="content-wrapper"&gt;
        &lt;div class="about-me"&gt;
  
          &lt;h3 class="fadeIn-left-normal" id="About-Me"&gt;About me&lt;/h3&gt;
  
          &lt;!-- &lt;img class="image fadeIn" src="/images/Paragraph_Images/thinking.jpeg" width="300" height="300"&gt; --&gt;
  
          &lt;p class="fadeIn-right intro1" style="column-count: 1"&gt;
            15 years old, addicted to programming, loves hugs and is available for your project.&lt;br&gt; Always on the look for improving my own website, design and decision making.&lt;br&gt; I have an unique perspective on web-design and management.&lt;br&gt; Because
            I believe in coding the website myself instead of using pre-made templates.&lt;br&gt; The client wants a unique and new website, so why would you give them a pre-made design?
  
            &lt;p class="fadeIn-right intro2" style="comlumn-count: 1"&gt;
              My dream is to go to this awesome place called Silicon Valley, &lt;br&gt; and to work for a big design company someday.&lt;br&gt; If you need a front-end-developer or looking for an eager intern.&lt;br&gt; Than have a look at this website.&lt;/p&gt;
  
        &lt;/div&gt;
  
  
        &lt;div class="what-do-i-do info-block js-section"&gt;
  
          &lt;!--&lt;img class="image" src="/images/Paragraph_Images/coding.jpg" width="200" height="200"&gt; --&gt;
  
          &lt;h3 class=" js-header" id="What-Do-I-Do"&gt;What do I do&lt;/h3&gt;
  
          &lt;p class=" info-block__copy js-copy" style="column-count: 1"&gt;
            I work as a front-end developer (if you don't know what that is go to this &lt;a href="https://skillcrush.com/2016/02/11/skills-to-become-a-front-end-developer/" target="_blank"&gt;page&lt;/a&gt;)&lt;br&gt; I develop interactive websites and can refresh your
            current site.&lt;br&gt; But I also like making the site interactive for the users of the website. Interested?&lt;br&gt; Take a gander at my projects.&lt;/p&gt;
        &lt;/div&gt;
  
  
        &lt;div class="info-block js-section"&gt;
          &lt;h3 class=" js-header" id="How-I-Work"&gt;How I work&lt;/h3&gt;
  
  
          &lt;p class=" info-block__copy js-copy" style="column-count: 1"&gt;
            Solo or group, I can work.&lt;br&gt; My preference does go to group projects. &lt;/p&gt;
  
        &lt;/div&gt;
  
  
        &lt;div class="projects info-block js-section"&gt;
          &lt;h3 class=" js-header" id="Projects"&gt;Projects&lt;/h3&gt;
  
  
          &lt;p class=" info-block__copy js-copy" style="column-count: 1"&gt;
            These are some projects that I have worked on over the last couple years.&lt;br&gt; These can vary from small games to huge websites.&lt;br&gt; It took me a lot of time and effort to make and finish these, even a short peek would also be appreciated.&lt;br&gt;          (The projects tab still needs to be added...&lt;br&gt; I should tell the developer this... oh wait)&lt;/p&gt;
        &lt;/div&gt;
  
  
        &lt;div class="info-block js-section"&gt;
          &lt;h3 class=" js-header" id="Who-I-Work-With"&gt;Who I work with&lt;/h3&gt;
  
  
          &lt;p class=" info-block__copy js-copy" style="column-count: 1"&gt;
          &lt;/p&gt;
        &lt;/div&gt;
  
  
        &lt;div class="Experiences info-block js-section" id="Experiences"&gt;
          &lt;h3 class=" js-header" id="Who-I-work-with"&gt;Experiences&lt;/h3&gt;
  
  
          &lt;p class=" info-block__copy js-copy" style="column-count: 1"&gt;Over the last couple years I've done internships at several companies.&lt;br&gt; These include&lt;/p&gt;
        &lt;/div&gt;
  
  
        &lt;div class="links info-block" id="inspiration"&gt;
          &lt;h3&gt;Just some cool websites&lt;/h3&gt;
  
  
          &lt;h5&gt;No description needed&lt;/h5&gt;
  
  
          &lt;ul class="websites"&gt;
            &lt;li&gt;
              &lt;a href="https://www.sirinlabs.com/" target="_blank"&gt;Sirinlabs&lt;/a&gt;
            &lt;/li&gt;
  
  
            &lt;li&gt;
              &lt;a href="https://www.awwwards.com/" target="_blank"&gt;Awwwards&lt;/a&gt;
            &lt;/li&gt;
  
  
            &lt;li&gt;
              &lt;a href="https://thefwa.com/awards/page/1/" target="_blank"&gt;TheFwa&lt;/a&gt;
            &lt;/li&gt;
  
  
            &lt;li&gt;
              &lt;a href="https://dribbble.com/" target="_blank"&gt;Dribbble&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;hr&gt;
  
  
      &lt;div class="footer" id="footer"&gt;
        &lt;p id="Contact" class="e-mail"&gt;You won't believe it, you can send emails!&lt;/p&gt;
        &lt;br&gt;
  
  
        &lt;div class="button"&gt;
          &lt;a class="button-extenal-link" href="mailto:rubennijhuis@rubenswebsite.com?subject=Contact"&gt;e-mail&lt;/a&gt;
        &lt;/div&gt;
  
  
        &lt;p class="instagram"&gt;Btw there's Instagram nowaydays.&lt;/p&gt;
        &lt;br&gt;
  
  
        &lt;div&gt;
          &lt;a class="button-extenal-link" href="https://www.instagram.com/ruben_n_pics/" target="_blank"&gt;Instagram&lt;/a&gt;
        &lt;/div&gt;
  
        &lt;div class="coffee"&gt;
          &lt;p&gt;Don't buy me a coffee. I.. I don't like it.&lt;/p&gt;
        &lt;/div&gt;
  
  
        &lt;p&gt;@2017&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
    &lt;div&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;
      &lt;/script&gt;
      &lt;script src="js/script.js" type="text/javascript"&gt;
      &lt;/script&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <ol start="2">
  <li>The javascript that i had for the fade in text if the user would scroll to a certain point doesn't work since i used the parallax. PLS help?</li>
  </ol>