Please use the below code in notepad and save as html to see output. There is a login form and an animated background. After adding the background, I am not able to click the username box and not able to write anything in that. Tried changing position in CSS. But it is not happening. 

```html
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> html,
body {
    height: 100%;
    margin: 0;
    background: rgb(2, 0, 36);
    background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(149, 199, 20, 1) 0%, rgba(0, 212, 255, 1) 96%);
}

.myForm {
    background-color: rgba(0, 0, 0, 0.5) !important;
    padding: 15px !important;
    border-radius: 15px !important;
    color: white;
    position: fixed;
    transform: translateX(-50%);
}

input {
    position: fixed;
    border-radius: 0 15px 15px 0 !important;
}

input:focus {
    outline: none;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
}

.br-15 {
    border-radius: 15px 0 0 15px !important;
}

.submit_btn {
    border-radius: 15px !important;
    background-color: #95c714 !important;
    border: 0 !important;
}

#particles-js {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50% 50%;
    position: fixed;
    top: 0px;
    z-index: 1;
}

</style> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <dvi class="container h-200"> <div class="d-flex justify-content-center"> <div class="card mt-5 col-md-4 animated bounceInDown myForm"> <div class="card-header"> <center> <h5>Admin Portal</h5> </center> </div> <form> <div class="card-body"> <div id="dynamic_container"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text br-15"><i class="fas fa-user"></i></span> </div> <input type="text" placeholder="Login ID" class="form-control"/> </div> <div class="input-group mt-3"> <div class="input-group-prepend"> <span class="input-group-text br-15"><i class="fas fa-key"></i></span> </div> <input type="password" placeholder="Login Password" class="form-control"/> </div> </div> </div> <div class="card-footer"><center> <button class="btn btn-success btn-lg submit_btn"> <i class="fas fa-arrow-alt-circle-right"></i> LOGIN</button></center> </div> </form> </div> </div> </dvi> <div id="particles-js"></div> <script type="text/javascript"> $.getScript("https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js", function() {
    particlesJS('particles-js', {
        "particles": {
            "number": {
                "value": 80, "density": {
                    "enable": true, "value_area": 800
                }
            }
            , "color": {
                "value": "#ffffff"
            }
            , "shape": {
                "type": "circle", "stroke": {
                    "width": 0, "color": "#000000"
                }
                , "polygon": {
                    "nb_sides": 6
                }
                , "image": {
                    "width": 100, "height": 100
                }
            }
            , "opacity": {
                "value": 0.5, "random": false, "anim": {
                    "enable": false, "speed": 1, "opacity_min": 0.1, "sync": false
                }
            }
            , "size": {
                "value": 5, "random": true, "anim": {
                    "enable": false, "speed": 40, "size_min": 0.1, "sync": false
                }
            }
            , "line_linked": {
                "enable": true, "distance": 150, "color": "#ffffff", "opacity": 0.4, "width": 1
            }
            , "move": {
                "enable": true, "speed": 6, "direction": "none", "random": false, "straight": false, "out_mode": "out", "attract": {
                    "enable": false, "rotateX": 600, "rotateY": 1200
                }
            }
        }
        , "interactivity": {
            "detect_on": "canvas", "events": {
                "onhover": {
                    "enable": true, "mode": "repulse"
                }
                , "onclick": {
                    "enable": true, "mode": "push"
                }
                , "resize": true
            }
            , "modes": {
                "grab": {
                    "distance": 400, "line_linked": {
                        "opacity": 1
                    }
                }
                , "bubble": {
                    "distance": 400, "size": 40, "duration": 2, "opacity": 8, "speed": 3
                }
                , "repulse": {
                    "distance": 200
                }
                , "push": {
                    "particles_nb": 4
                }
                , "remove": {
                    "particles_nb": 2
                }
            }
        }
        , "retina_detect": true, "config_demo": {
            "hide_card": false, "background_color": "#b61924", "background_image": "", "background_position": "50% 50%", "background_repeat": "no-repeat", "background_size": "cover"
        }
    }
    );
}

);
</script>
```