background animation not setup perfect

My CSS animation is not set properly.

Here is a codepen example [https://codepen.io/Dev_PHioNiX/pen/XWBjrXY][1]

I have make one example in this I have added 2 label and input box but it's not showing above canvas and also I want that center.

I want to set this background on my login div how can I do this? I have tried but the canvas only showing not the login.

Solution

<div class="mb-3">
    <label for="exampleFormControlInput1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="mb-3">
    <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>

remove this form from canvas tag and place into this div and add little bit css for center it.

div.btnbg {
  position: fixed;
  left: 40%;
  top: 30%;
}

using this css you can center your form.