CSS Parallax effect height to 50%

Question

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.

Code:

<header class="parallax-window" data-parallax="scroll" data-image-src="img/picture.jpg" alt="test">

.parallax-window {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 50%; //Not working.. why? 
}


  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js'></script>
  <script >// SMOOTH SCROLLING
  $(function() {
    $('a[href*="#"]:not([href="#"])').click(function() {
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && 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'});
  </script>

score 0 · Answer 1 · answered May 18 '18 at 14:26

First off all: you are initiating the parallax twice! The attribute data-parallax="scroll" triggers auto initialization which you repeat by calling $('.parallax-window').parallax({imageSrc: 'img/picture.jpg'}); in your javascript. Also there is no need to provide the image source twice! Either you use the attribute data-image-src or the javascript option imageSrc. The one actually overwrites the other, so it does no harm, but it's unnecessary.

Furthermore, relative (or percentage) height only works in relation to the parent element. If the parent element doesn't have a height or relative height, setting this attribute in the children won't work. This is CSS related. You could try setting the parent element to 100% (e.g. body { height: 100%; } or to an absolute height (body { height: 1200px; }), or a height related to the viewing height (body { height: 200vh; }). But I would not recommend this since you have to guarantee that your content fits within the defined size.

I would rather work with something like:

.parallax-window {
    min-height: 50vh;
}

also make sure that you close your <header> element before you put other code. Otherwise this code will be put in front of the parallax.

CSS Parallax effect height to 50%

1 Answers1