Why Is the CSS not Appearing Behind My Black Writing Container - Causing Color Clash

I thought if I used a z-index of 99 and had a black background color - the clouds CSS would not be visible through the #writing-container.

However the clouds are visible through the container, but are behind the text. The text is visible, but is causing a clash.

I put a black background-color on my #ph-p-container and this resulted in the desired effect (the cloud doesn't appear through black background), yet the logic doesn't seem to work on the whole of the #writing-container.

I could apply different black back-grounds to all the containers, but the outlines of the black rectangles looks unprofessional.

How can I get the clouds to not be visible through the whole of the #writing-container?

https://codepen.io/jake-matthews/pen/wvQMaEO

.page-hero {
  background-color: black;
  height: 825px;
  color: white;
  display: flex;
  align-items: center;
  overflow-x: hidden;
  flex-wrap: wrap;
  width: 100%;
  z-index: 2;
  position: relative;
}

#writing-container {
  margin-left: 175px;
  margin-bottom: 160px;
  background-color: black;
  position: relative;
  /* Add this */
  z-index: 99;
  /* Add this */
}

#ph-p-container {
  width: 60%;
  position: relative;
  background-color: black;
}

#ph-h1-container {
  width: 80%;
  position: relative;
  overflow: visible;
}

#ph-h1-container h1 {
  font-size: 70px;
  margin-bottom: 33px;
  position: relative;
  display: inline-block;
}

.highlight {
  box-shadow: inset 0 -27.25px 0 rgb(255, 98, 0);
}

#page-hero-svgs {
  height: 50px;
  display: flex;
  align-items: center;
  margin-left: 20px;
  margin-bottom: 33px;
  position: relative;
}

.svg-icon {
  width: 50px;
  height: 50px;
  margin-right: 20px;
  transition: ease-in;
  fill: rgb(255, 98, 0);
}

.svg-icon:hover {
  fill: white;
  cursor: pointer;
  transition: ease-in 0.3s;
}


/* Clouds */

#background-wrap {
  height: 100%;
  width: 100%;
  padding-top: 50px;
  position: absolute;
  z-index: 0;
}


/* KEYFRAMES */

@-webkit-keyframes animateCloud {
  0% {
    margin-left: -1000px;
  }
  100% {
    margin-left: 100%;
  }
}

@-moz-keyframes animateCloud {
  0% {
    margin-left: -1000px;
  }
  100% {
    margin-left: 100%;
  }
}

@keyframes animateCloud {
  0% {
    margin-left: -1000px;
  }
  100% {
    margin-left: 100%;
  }
}


/* ANIMATIONS */

.x1 {
  -webkit-animation: animateCloud 35s linear infinite;
  -moz-animation: animateCloud 35s linear infinite;
  animation: animateCloud 35s linear infinite;
  -webkit-transform: scale(0.65);
  -moz-transform: scale(0.65);
  transform: scale(0.65);
}

.x2 {
  -webkit-animation: animateCloud 20s linear infinite;
  -moz-animation: animateCloud 20s linear infinite;
  animation: animateCloud 20s linear infinite;
  -webkit-transform: scale(0.3);
  -moz-transform: scale(0.3);
  transform: scale(0.3);
}

.x3 {
  -webkit-animation: animateCloud 30s linear infinite;
  -moz-animation: animateCloud 30s linear infinite;
  animation: animateCloud 30s linear infinite;
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  transform: scale(0.5);
}

.x4 {
  -webkit-animation: animateCloud 18s linear infinite;
  -moz-animation: animateCloud 18s linear infinite;
  animation: animateCloud 18s linear infinite;
  -webkit-transform: scale(0.4);
  -moz-transform: scale(0.4);
  transform: scale(0.4);
}

.x5 {
  -webkit-animation: animateCloud 25s linear infinite;
  -moz-animation: animateCloud 25s linear infinite;
  animation: animateCloud 25s linear infinite;
  -webkit-transform: scale(0.55);
  -moz-transform: scale(0.55);
  transform: scale(0.55);
}


/* OBJECTS */

.cloud {
  background: white;
  background: -moz-linear-gradient(top, rgb(222, 217, 217), grey 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, grey), color-stop(100%, grey));
  background: -webkit-linear-gradient(top, rgb(222, 217, 217), grey 100%);
  background: -o-linear-gradient(top, rgb(222, 217, 217), grey 100%);
  background: -ms-linear-gradient(top, rgb(222, 217, 217), grey 100%);
  background: linear-gradient(top, rgb(222, 217, 217), grey 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='grey', endColorstr='grey', GradientType=0);
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  -webkit-box-shadow: 0 8px 5px rgb(222, 217, 217);
  -moz-box-shadow: 0 8px 5px rgb(222, 217, 217);
  box-shadow: 0 8px 5px rgb(222, 217, 217);
  height: 120px;
  position: relative;
  width: 350px;
}

.cloud:after,
.cloud:before {
  background: rgb(222, 217, 217);
  content: '';
  position: absolute;
  z-indeX: -1;
}

.cloud:after {
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  height: 100px;
  left: 50px;
  top: -50px;
  width: 100px;
}

.cloud:before {
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  border-radius: 200px;
  width: 180px;
  height: 180px;
  right: 50px;
  top: -90px;
}

<div class="page-hero">
  <div id="writing-container">
    <div id="background-wrap">
      <div class="x1">
        <div class="cloud"></div>
      </div>
      <div class="x2">
        <div class="cloud"></div>
      </div>
      <div class="x3">
        <div class="cloud"></div>
      </div>
      <div class="x4">
        <div class="cloud"></div>
      </div>
      <div class="x5">
        <div class="cloud"></div>
      </div>
    </div>
    <div id="ph-h1-container">
      <h1>Hi, I'm Jake | <span class="highlight">Software </span>
        <br>
        <span class="highlight">Engineer </span></h1>
    </div>
    <div id="page-hero-svgs">
      <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="github">
                        <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                    </svg>
      <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="linkedin">
                        <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
                    </svg>
      <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 75" id="email">
                        <path d="M 66.097 12.089 L 9.196999 12.089 C 4.126 12.089 0 16.215 0 21.286 L 0 21.286 L 0 54.008 C 0 59.079 4.126 63.204998 9.197 63.204998 L 9.197 63.204998 L 66.097 63.204998 C 71.168 63.204998 75.294 59.079 75.294 54.008 L 75.294 54.008 L 75.294 21.287 C 75.295 16.215 71.169 12.089 66.097 12.089 z M 61.603 18.089 L 37.647 33.523 L 13.691 18.089 L 61.603 18.089 z M 66.097 57.206 L 9.196999 57.206 C 7.434 57.206 6 55.771 6 54.009 L 6 54.009 L 6 21.457 L 35.795998 40.617 C 35.836 40.642002 35.878998 40.659 35.92 40.682 C 35.962997 40.705997 36.007 40.729 36.051 40.751 C 36.281998 40.87 36.52 40.966 36.763 41.029 C 36.788002 41.036 36.813 41.038998 36.838 41.045 C 37.105 41.107998 37.375 41.147 37.645 41.147 C 37.646 41.147 37.647 41.147 37.647 41.147 C 37.649 41.147 37.649998 41.147 37.651 41.147 C 37.921 41.147 38.191 41.109 38.458 41.045 C 38.483 41.038998 38.508 41.036 38.533 41.029 C 38.776 40.966 39.013 40.87 39.245003 40.751 C 39.289 40.729 39.333004 40.706 39.376003 40.682 C 39.417004 40.659 39.460003 40.642 39.500004 40.617 L 39.500004 40.617 L 69.296005 21.457 L 69.296005 54.008 C 69.295 55.771 67.86 57.206 66.097 57.206 z"/>
                    </svg>
    </div>
    <div id="ph-p-container">
      <p>I am passionate about creating beautiful, immersive and interactive websites – whilst implementing the latest, most powerful libraries and frameworks.
        <br>
        <br> I have a thirst for pushing my capabilities.
        <br>
        <br> I am also an experienced forex trader.</span>
      </p>
    </div>
  </div>
</div>

Solution

Consider having the clouds outside the #writing-container element:

.page-hero {
  background-color: black;
  height: 825px;
  color: white;
  display: flex;
  align-items: center;
  overflow-x: hidden;
  flex-wrap: wrap;
  width: 100%;
  z-index: 2;
  position: relative;
}

#writing-container {
  margin-left: 175px;
  margin-bottom: 160px;
  background-color: black;
  position: relative;
  /* Add this */
  z-index: 99;
  /* Add this */
}

#ph-p-container {
  width: 60%;
  position: relative;
  background-color: black;
}

#ph-h1-container {
  width: 80%;
  position: relative;
  overflow: visible;
}

#ph-h1-container h1 {
  font-size: 70px;
  margin-bottom: 33px;
  position: relative;
  display: inline-block;
}

.highlight {
  box-shadow: inset 0 -27.25px 0 rgb(255, 98, 0);
}

#page-hero-svgs {
  height: 50px;
  display: flex;
  align-items: center;
  margin-left: 20px;
  margin-bottom: 33px;
  position: relative;
}

.svg-icon {
  width: 50px;
  height: 50px;
  margin-right: 20px;
  transition: ease-in;
  fill: rgb(255, 98, 0);
}

.svg-icon:hover {
  fill: white;
  cursor: pointer;
  transition: ease-in 0.3s;
}


/* Clouds */

#background-wrap {
  height: 100%;
  width: 100%;
  padding-top: 50px;
  position: absolute;
  z-index: 0;
}


/* KEYFRAMES */

@-webkit-keyframes animateCloud {
  0% {
    margin-left: -1000px;
  }
  100% {
    margin-left: 100%;
  }
}

@-moz-keyframes animateCloud {
  0% {
    margin-left: -1000px;
  }
  100% {
    margin-left: 100%;
  }
}

@keyframes animateCloud {
  0% {
    margin-left: -1000px;
  }
  100% {
    margin-left: 100%;
  }
}


/* ANIMATIONS */

.x1 {
  -webkit-animation: animateCloud 35s linear infinite;
  -moz-animation: animateCloud 35s linear infinite;
  animation: animateCloud 35s linear infinite;
  -webkit-transform: scale(0.65);
  -moz-transform: scale(0.65);
  transform: scale(0.65);
}

.x2 {
  -webkit-animation: animateCloud 20s linear infinite;
  -moz-animation: animateCloud 20s linear infinite;
  animation: animateCloud 20s linear infinite;
  -webkit-transform: scale(0.3);
  -moz-transform: scale(0.3);
  transform: scale(0.3);
}

.x3 {
  -webkit-animation: animateCloud 30s linear infinite;
  -moz-animation: animateCloud 30s linear infinite;
  animation: animateCloud 30s linear infinite;
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  transform: scale(0.5);
}

.x4 {
  -webkit-animation: animateCloud 18s linear infinite;
  -moz-animation: animateCloud 18s linear infinite;
  animation: animateCloud 18s linear infinite;
  -webkit-transform: scale(0.4);
  -moz-transform: scale(0.4);
  transform: scale(0.4);
}

.x5 {
  -webkit-animation: animateCloud 25s linear infinite;
  -moz-animation: animateCloud 25s linear infinite;
  animation: animateCloud 25s linear infinite;
  -webkit-transform: scale(0.55);
  -moz-transform: scale(0.55);
  transform: scale(0.55);
}


/* OBJECTS */

.cloud {
  background: white;
  background: -moz-linear-gradient(top, rgb(222, 217, 217), grey 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, grey), color-stop(100%, grey));
  background: -webkit-linear-gradient(top, rgb(222, 217, 217), grey 100%);
  background: -o-linear-gradient(top, rgb(222, 217, 217), grey 100%);
  background: -ms-linear-gradient(top, rgb(222, 217, 217), grey 100%);
  background: linear-gradient(top, rgb(222, 217, 217), grey 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='grey', endColorstr='grey', GradientType=0);
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  -webkit-box-shadow: 0 8px 5px rgb(222, 217, 217);
  -moz-box-shadow: 0 8px 5px rgb(222, 217, 217);
  box-shadow: 0 8px 5px rgb(222, 217, 217);
  height: 120px;
  position: relative;
  width: 350px;
}

.cloud:after,
.cloud:before {
  background: rgb(222, 217, 217);
  content: '';
  position: absolute;
  z-indeX: -1;
}

.cloud:after {
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  height: 100px;
  left: 50px;
  top: -50px;
  width: 100px;
}

.cloud:before {
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  border-radius: 200px;
  width: 180px;
  height: 180px;
  right: 50px;
  top: -90px;
}

<div class="page-hero">
  <div id="background-wrap">
    <div class="x1">
      <div class="cloud"></div>
    </div>

    <div class="x2">
      <div class="cloud"></div>
    </div>

    <div class="x3">
      <div class="cloud"></div>
    </div>

    <div class="x4">
      <div class="cloud"></div>
    </div>

    <div class="x5">
      <div class="cloud"></div>
    </div>
  </div>
  <div id="writing-container">
    <div id="ph-h1-container">
      <h1>Hi, I'm Jake | <span class="highlight">Software </span>
        <br>
        <span class="highlight">Engineer </span></h1>
    </div>
    <div id="page-hero-svgs">

      <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="github">
                        <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                    </svg>

      <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="linkedin">
                        <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
                    </svg>

      <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 75" id="email">
                        <path d="M 66.097 12.089 L 9.196999 12.089 C 4.126 12.089 0 16.215 0 21.286 L 0 21.286 L 0 54.008 C 0 59.079 4.126 63.204998 9.197 63.204998 L 9.197 63.204998 L 66.097 63.204998 C 71.168 63.204998 75.294 59.079 75.294 54.008 L 75.294 54.008 L 75.294 21.287 C 75.295 16.215 71.169 12.089 66.097 12.089 z M 61.603 18.089 L 37.647 33.523 L 13.691 18.089 L 61.603 18.089 z M 66.097 57.206 L 9.196999 57.206 C 7.434 57.206 6 55.771 6 54.009 L 6 54.009 L 6 21.457 L 35.795998 40.617 C 35.836 40.642002 35.878998 40.659 35.92 40.682 C 35.962997 40.705997 36.007 40.729 36.051 40.751 C 36.281998 40.87 36.52 40.966 36.763 41.029 C 36.788002 41.036 36.813 41.038998 36.838 41.045 C 37.105 41.107998 37.375 41.147 37.645 41.147 C 37.646 41.147 37.647 41.147 37.647 41.147 C 37.649 41.147 37.649998 41.147 37.651 41.147 C 37.921 41.147 38.191 41.109 38.458 41.045 C 38.483 41.038998 38.508 41.036 38.533 41.029 C 38.776 40.966 39.013 40.87 39.245003 40.751 C 39.289 40.729 39.333004 40.706 39.376003 40.682 C 39.417004 40.659 39.460003 40.642 39.500004 40.617 L 39.500004 40.617 L 69.296005 21.457 L 69.296005 54.008 C 69.295 55.771 67.86 57.206 66.097 57.206 z"/>
                    </svg>
    </div>

    <div id="ph-p-container">
      <p>I am passionate about creating beautiful, immersive and interactive websites – whilst implementing the latest, most powerful libraries and frameworks.
        <br>
        <br> I have a thirst for pushing my capabilities.
        <br>
        <br> I am also an experienced forex trader.</span>
      </p>
    </div>
  </div>
</div>