title: CSS Parallax effect height to 50%
body: <p>I am currently using a parallax effect which takes the whole background of the front page.
  My problem is that I want to set the height to like 50%.. but thats not working.</p>
  
  <hr>
  
  <p>Code: </p>
  
  <pre><code>&lt;header class="parallax-window" data-parallax="scroll" data-image-src="img/picture.jpg" alt="test"&gt;
  
  .parallax-window {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 50%; //Not working.. why? 
  }
  
  
    &lt;script src='https://code.jquery.com/jquery-2.2.4.min.js'&gt;&lt;/script&gt;
    &lt;script src='https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js'&gt;&lt;/script&gt;
    &lt;script &gt;// SMOOTH SCROLLING
    $(function() {
      $('a[href*="#"]:not([href="#"])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') &amp;&amp; location.hostname == this.hostname) {
          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
          if (target.length) {
            $('html, body').animate({
              scrollTop: target.offset().top
            }, 900);
            return false;
          }
        }
      });
    });
    $('.parallax-window').parallax({imageSrc: 'img/picture.jpg'});
    &lt;/script&gt;
  </code></pre>