Height attribute not using percentage value

Height attribute not using percentage value


Hello, I am creating my portfolio, and I am learning how to use a parallax effect. I am having an issue where my first parallax image does not seem to properly render the height css attribute if it’s a percent or “auto”, but it will render if the attribute is set to a certain amount of pixels. Can someone please help me through this? I would rather not set it as a hard pixel value because it may not show up properly on some screen sizes.

My portfolio link is: http://codepen.io/oaak001/pen/qRQPQP

The css element in question is: parallax_image_01, located on line 16 in the HTML segment, and line 11 in the CSS element.

Any help or advice would be welcome. Thanks.


Height 100% in the div is not working, because there is nothing to compare the 100% or auto to. The answer is to:

  • Add height: 100% to html not just body, example:
html, body {
  background-color: grey;
  height: 100%;


  • Add position: absolute to body in order that the elements have their height relative to it, example:
body {
  background-color: grey;
  position: absolute;
  height: 100%;

This gives the div’s something absolute to take 100% of.

Forget using 100% height, and use viewport units:

height: 100vh;

Further Information:
Web Design Weekly Article


Thank you Isaac, your solution worked! By setting the html height attribute to 100%, the first parallax image showed up properly. I will have to do some research into how the position attribute affects the style. Thanks again!


No problem, good luck on portfolio, great start so far!

Btw, you don’t need position absolute on the body and 100% for html too… I should have made that more clear that it was either or…