Parallax effect. have 3 boxes on image. how to remove a white band in the background across the width of the image. Also give space between boxes

Code is to show parallax effect. I have 3 boxes on top of image, will slide up and down on scrolling. There is a white band behind the boxes covering the whole width of the image, which also scrolls. How to remove this white band? Thanks in advance.

.parallax {
  /* the image used */
  background-image: url("../mdck-parallaxPhoto/ganesh (4).jpg");
  /* set specific height */
  min-height: 700px;
  /* create parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.flexBox {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.text-block {
  background-color: white;
  padding: 50px 50px 50px 50px;
  border: 2px solid black;
  border-radius: 20px 20px 20px 20px;
}

p {
  font-weight: bold;
  font-family: Helvetica, sans-serif;
  color: red;
}

<!doctype html>
<html lang="en-US">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width = device-width, initial-scale = 1">
</head>

<body>
  <!-- parallax effect -->
  <div class="parallax"></div>
  <!-- keep images side by side -->
  <div class="flexBox">
    <div class="text-block">
      <p>Estd. 1984</p>
    </div>
    <div class="text-block">
      <p>Staff 25</p>
    </div>
    <div class="text-block">
      <p>Students 1000</p>
    </div>
  </div>
  <div class="parallax"></div>
</body>

</html>

Solution

You need to remove one of the <div class="parallax"></div> and put the <div class="flexBox"> inside the other one. This way the background will be transparent.

Add a padding-top:100vh to position your divs.

Add justify-content: space-around to add space around your divs.

.parallax {
  /* the image used */
  background-image: url("https://placehold.jp/1500x1500.png");
  /* set specific height */
  min-height: 700px;
  padding-top:100vh;
  /* create parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.flexBox {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.text-block {
  background-color: white;
  padding: 50px 50px 50px 50px;
  border: 2px solid black;
  border-radius: 20px 20px 20px 20px;
}

p {
  font-weight: bold;
  font-family: Helvetica, sans-serif;
  color: red;
}

<!doctype html>
<html lang="en-US">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width = device-width, initial-scale = 1">
</head>

<body>
  <!-- parallax effect -->
  <div class="parallax">
    <!-- keep images side by side -->
    <div class="flexBox">
      <div class="text-block">
        <p>Estd. 1984</p>
      </div>
      <div class="text-block">
        <p>Staff 25</p>
      </div>
      <div class="text-block">
        <p>Students 1000</p>
      </div>
    </div>
  </div>
</body>

</html>