Height attribute not using percentage value

1

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.

2

Help:
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%;
}

OR

  • 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.

Advice:
Forget using 100% height, and use viewport units:

height: 100vh;

Further Information:
Web Design Weekly Article

3

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!

1 Like
4

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…