How to be background canvas

I have particles.js on my page but it is in front of the every element. I want to make it background. How can do this? I want to make something like there : https://vincentgarreau.com/particles.js/ My form is behind of the particles canvas. How can i set it in front of the canvas ?

My style.css and index.html:

/* Particles JS Style */

  
  /* ---- particles.js container ---- */
  
  #particles-js{
    width: 100%;
    height: 100%;
    
    background: linear-gradient(rgb(151, 206, 231) 0%, rgb(253, 253, 253) 100%);
    background-image: url('');
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    top: 0;
  }
 
  /* Particles JS Style  end */
html{
    height: 100%;
    width: 100%;
}

body{
    height: 100%;
    width: 100%;
    
}


canvas {
 position: fixed;
 top:0;bottom:0;right:0;left:0;
 margin:0;
 width: fit-content;
 height: fit-content;

 

}


form {
    display: block;
   
}

.mainContainer {
    min-height: 100vh;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    background: url("../img/2.jpg");
    background-size: cover;
    background-position: center center;
    
    font-family: 'Lato', sans-serif;
}


.mainContainer form {
    width: 100%;
    max-width: 940px;
    margin: 0;
    
    background: linear-gradient(rgb(78, 111, 126) 50%, rgb(164, 198, 214) 100%);
    padding: 50px 70px 80px 70px;
    
}

.mainContainer form fieldset {
    margin-bottom: 40px;
    border: 0px;
}

.mainContainer form fieldset legend {
    font-size: 36px;
    font-weight: bold;
    color: #333;
    font-family: 'Poppins', sans-serif;
}

.mainContainer form .inner-form header {
    margin-bottom: 28px;
}

.mainContainer form .inner-form header .icon-line {
    display: -ms-flexbox;
    display: flex;
}

.mainContainer form .inner-form header .icon-line .item {
    color: #555;
    border-radius: 3px;
    background: #fff;
    margin-right: 5px;
    padding: 18px 20px;
    transition: all .3s;
    cursor: pointer;
    position: relative;
    text-align: center;
    
}

.mainContainer form .inner-form header .icon-line .item:after {
    content: '';
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #002c71;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: all .3s;
}


.mainContainer form .inner-form header .icon-line .item .group-icon {
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 10px;
}

.mainContainer form .inner-form header .icon-line .item .group-icon svg {
    width: 20px;
    height: 20px;
    fill: #555;
    margin: 0 4px;
}

.mainContainer form .inner-form header .icon-line .item span {
    font-size: 12px;
    font-weight: bold;
}

.mainContainer form .inner-form header .icon-line .item.active {
    color: #fff;
    background: #002c71;
}

.mainContainer form .inner-form header .icon-line .item.active:after {
    opacity: 1;
}

.mainContainer form .inner-form header .icon-line .item.active svg {
    fill: #fff;
}

.mainContainer form .inner-form header .icon-line .item:hover,
.s012 form .inner-form header .icon-line .item:focus {
    background: #002c71;
    color: #fff;
}

.mainContainer form .inner-form header .icon-line .item:hover .group-icon svg,
.s012 form .inner-form header .icon-line .item:focus .group-icon svg {
    fill: #fff;
}

.mainContainer form .inner-form .main-form {
    position: relative;
}

.mainContainer form .inner-form .main-form .row {
    margin-bottom: 15px;
    
}

.mainContainer form .inner-form .main-form .row .input-line{
    background: #fff;
    border-radius: 3px;
    height: 50px;
    width: 70%;
    position: relative;
    padding: 10px 15px 10px 48px;
}

.mainContainer form .inner-form .main-form .row .input-line .icon-input {
    width: 48px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
}

.mainContainer form .inner-form .main-form .row .input-line .icon-input svg {
    fill: #ccc;
    width: 20px;
    height: 20px;
    -ms-flex-item-align: end;
    align-self: flex-end;
    margin-bottom: 10px;
}

.mainContainer form .inner-form .main-form .row .input-line .input-field label {
    font-size: 11px;
    font-weight: 900;
    display: block;
    color: #555;
}

.mainContainer form .inner-form .main-form .row .input-line .input-field input {
    font-size: 16px;
    color: #333;
    background: transparent;
    width: 100%;
    border: 0;
    padding: 2px 0;
    font-family: 'Lato', sans-serif;
    margin-top: 5px;
}

.mainContainer form .inner-form .main-form .row .input-line .input-field input.placeholder {
    color: #808080;
}

.mainContainer form .inner-form .main-form .row .input-line .input-field input:-moz-placeholder {
    color: #808080;
}

.mainContainer form .inner-form .main-form .row .input-line .input-field input::-webkit-input-placeholder {
    color: #808080;
}

.mainContainer form .inner-form .main-form .row .input-line.input-field input.hover,
.mainContainer form .inner-form .main-form .row .input-line .input-field input:focus {
    box-shadow: none;
    outline: 0;
}

.mainContainer form .btn-search {
    right: 0px;
    min-width: 100px;
    height: 50px;
    padding: 0 15px;
    background: #ff8300;
    white-space: nowrap;
    border-radius: 3px;
    font-size: 16px;
    color: #fff;
    transition: all .2s ease-out, color .2s ease-out;
    border: 0;
    cursor: pointer;
    font-weight: 900;
    

}

.mainContainer form .btn-search:hover {
    background: #e67600;
}

@media screen and (max-width: 767px) {
    .mainContainer form {
        padding: 30px 15px;
    }

    .mainContainer form fieldset legend {
        text-align: center;
        
    }

    .mainContainer form .inner-form header {
        overflow: hidden;
    }

    .mainContainer form .inner-form header .icon-line {
        overflow-x: auto;
    }

    .mainContainer form .inner-form header .icon-line .item {
        width: 100%;
        min-width: 170px;
    }
}

#motherboard {
    margin-top: 20px;
    font-size: 28px;
}

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    
   </head>
 
  <body id="particles-js" >
    <div class="mainContainer"  >
      <!-- scripts -->
  <script src="public/particles.js"></script>
  <script src="public/js/app.js"></script>
      <form>
        <fieldset>
          <legend>Donanım Motoru</legend>
        </fieldset>
        <div class="inner-form">
          <header>
            <div class="icon-line" id="iconContainer">
              <div class="item active" id="">
                <div class="group-icon">
                 <i class="fas fa-hdd"></i>
                </div>
                <span>SSD</span>
                </div>
              <div class="item" id="">
                  <div class="group-icon">
                   <i class="fas fa-server"></i>
                  </div>
                  <span>EKRAN KARTI</span>
                </div>
              <div class="item" id="">
                <div class="group-icon">
                <i class="fas fa-microchip"></i>
                </div>
                <span>İŞLEMCİ</span>
              </div>
              
              <div class="item"  id="">
                <div class="group-icon">
                  <i class="fas fa-memory"></i>
                 </div>
                <span>RAM</span>
              </div>
            </div>
            
          </header>
          <div class="main-form" id="main-form">
            <div class="row">
              <div class="input-line">
                <div class="icon-input">
                    <i class="fas fa-border-none motherboard" id="motherboard"></i> 
                </div>
                <div class="input-field">
                  <label>ANAKARTINIZ</label>
                  <input type="text" placeholder="Bilgisayar modeliniz" />
                </div>
              </div>
            </div>
       
           
           
           <style>
              .searchButtontoRight {
                    position: absolute;
                    right: 0 px;
               }
              </style>
           
            <div class="row last">
               <button class="searchButtontoRight btn-search " type="submit" id="btnSearch">Ara</button> 
              
            </div>
            <script src="public/js/selection.js"></script>
            
          </div>
        </div>
      </form>
    </div>
  </body>


    
    
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700,900|Poppins:700" rel="stylesheet" />
    <link href="public/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="public/fontawesome-free-5.12.0-web/css/all.css" rel="stylesheet" type="text/css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

   

</html>

I am new for web development. Plase help me...