parallax html and css error

I am new to coding but can't seem to get simple home page with parallax image to work. Have tried different ways of doing it more times than I can remember now and none of them seem to be working. Can anyone see an error with my code that I am oblivious to?

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #f9f9f9;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: normal;
  font-size: 14px;
  color: #000000;
  line-height: 1.5;
  overflow-x: hidden;
}
h1 {
  font-size: 36px;
}
h2 {
  font-size: 30px;
}
h3 {
  font-size: 24px;
}
h4 {
  font-size: 20px;
}
h5 {
  font-size: 18px;
}
h6 {
  font-size: 16px;
}
/*Menu*/

#menu {} #menu ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}
#menu li {
  float: left;
  list-style: none;
}
#menu a {
  background-color: #cccccc;
  display: block;
  color: #ffffff;
  font-weight: 700;
  display: block;
  padding: 14px 14px;
  text-align: center;
  text-decoration: none;
}
#menu a:hover {
  background-color: #ffffff;
  color: #000000;
}
/*Parallax*/

.parallax1-img,
.parallax2-img. {
  opacity: 0.4;
  background-size: 206px 147px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: repeat;
}
.parallax1-img {
  min-height: 100%;
  background-image: url("./logo.jpg");
}
.parallax2-img {
  min-height: 30%;
  background-image: url("./logo.jpg");
}
/*Containers*/

.container {
  position: relative;
}
.container-middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/*Text*/

.center {
  text-align: center!important;
}
.padding-xlarge {
  padding: 16px 32px!important;
}
.black {
  color: #fff!important;
  background-color: #000!important;
}
.xlarge {
  font-size: 24px!important;
}
.animate-opacity {
  animation: opac 1.5s;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="apple-touch-icon" href="apple-touch-icon.png">
  <link rel="stylesheet" href="index_styles.css">
</head>

<body>
  <!-- Navbar (sit on top) -->
  <div id="menu">
    <ul>
      <li><a>HOME</a>
      </li>
    </ul>
  </div>

  <!-- Parallax Effect 1-->
  <div class="parallax1-img container">
    <div class="container-middle" style="white-space: nowrap;">
      <span class="center padding-xlarge black xlarge animate-opacity">My WEBSITE</span>
    </div>
  </div>

</body>

</html>

Solution

If you wanna use relative height like height: 100%; you must set:

html, body {
height: 100%;
}

If you have only body height on 100% that's not working.

Look at this: http://codepen.io/powro01/pen/pEBBgR

I think this is the effect what you want.

PS. for parallax effect you must set background-attachment: fixed after background-image.