0
0 Comments

I’m trying to make work a submition form using bootstrap + wp with a animated background using only css, the animation is working fine, but when i create the form into the same div container not working at all. I was Trying z-index css property, but can’t fix the problem, it look like the animation is overlay the form. I really don’t know how can i fix. I want to find the way the form work properly and with the animated background.

			
.space {
  position: relative;
  display: block;
  height: 100vh;
  width: 100%;
  background-color: #1B2735;
  background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
  color: white;
  padding-top: 20vh;
}

.stars > div {
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.stars .stars-back {
  top: -50%;
  opacity: 0.5;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, #eee, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 40px 70px, #fff, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 90px 40px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 160px 120px, #ddd, rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 300px 300px;
  animation: stars 4s infinite linear;
}

.stars .stars-middle {
  background-image: 
    radial-gradient(3px 3px at 50px 160px, #ddd, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 130px 80px, #fff, rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 200px 200px;
  animation: stars 2.5s infinite linear;
}
@keyframes stars {
  0% {
    top: -100%;
  }
  100% {
    top: 0;
  }
}


			
<div class="jumbotron space">
  <div class="stars">
    <div class="stars-back"></div>
    <div class="stars-middle"></div>
    <div class="stars-front"></div>
  </div>
  <h1>Jumbotron heading</h1>
        <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>
</div>

Anonymous Asked question May 14, 2021