How do I make my particles.js layer behind my buttons and text?

I edited the HTML part; all elements must be inside the <div id="particles-js"></div> container.

NOT: I compressed it as I didn't change the JavaScript and CSS parts. There are problems with the style applied to the page; if you can't solve the problems, you can create a new question.

particlesJS("particles-js",{particles:{number:{value:100,density:{enable:!0,value_area:800}},color:{value:"#ffffff"},shape:{type:"circle",stroke:{width:0,color:"#00ff00"},polygon:{nb_sides:5},image:{src:"img/github.svg",width:100,height:100}},opacity:{value:.5,random:!1,anim:{enable:!1,speed:1,opacity_min:.1,sync:!1}},size:{value:3,random:!0,anim:{enable:!1,speed:40,size_min:.1,sync:!1}},line_linked:{enable:!0,distance:150,color:"#ffffff",opacity:.4,width:1},move:{enable:!0,speed:4,direction:"none",random:!0,straight:!1,out_mode:"out",bounce:!1,attract:{enable:!1,rotateX:600,rotateY:1200}}},interactivity:{detect_on:"canvas",events:{onhover:{enable:!1,mode:"grab"},onclick:{enable:!1,mode:"push"},resize:!1},modes:{grab:{distance:140,line_linked:{opacity:1}},bubble:{distance:400,size:40,duration:2,opacity:8,speed:3},repulse:{distance:200,duration:.4},push:{particles_nb:5},remove:{particles_nb:2}}},retina_detect:!0});

body{background-color:#fff;font-family:monospace}.border-button{border:solid 2.5px #000;transition:border-width .6s linear;border-radius:20px;background-color:transparent;padding:2px 7px;font-size:11px;cursor:pointer;display:inline-block}.btn:hover{background:rgba(238,238,238,0.48)}.fourofour{color:#000}.border-button{border:solid 2.5px #000;transition:border-width .4s linear}.border-button:hover{border-width:3.5px}*{margin:0;padding:0}body{background:#000}canvas{display:block}#particles-js{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1}

<!DOCTYPE html>
<html prefix="og: https://ogp.me/ns#">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>arr3</title>
      <link href="style.css" rel="stylesheet" type="text/css">
      <link rel="icon" type="image/x-icon" href="Darkheart_Gear.ico">
      <meta property="og:title" content="arr3.ml" />
      <meta property="og:url" content="https://www.arr3.gq" />
      <meta property="og:image" content="https://www.arr3.ml/Darkheart_Gear.ico" />
      <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
      <style>body,html{margin:0;padding:0;width:100vw;height:100vh;background:linear-gradient(124deg,#ff2400,#e81d1d,#e8b71d,#e3e81d,#1de840,#1ddde8,#2b1de8,#dd00f3,#dd00f3);background-size:1800% 1800%;font-family:monospace;color:#000;image-rendering:pixelated;scrollbar-width:none;overflow:none;display:flex;justify-content:center;align-items:center;flex-direction:column;-webkit-animation:rainbow 18s ease infinite;-z-animation:rainbow 18s ease infinite;-o-animation:rainbow 18s ease infinite;animation:rainbow 18s ease infinite}::-webkit-scrollbar{display:none}iframe{width:100vw;height:100vh;border:none;margin:0;padding:0;display:block}@-webkit-keyframes rainbow{0%{background-position:0 82%}50%{background-position:100% 19%}100%{background-position:0 82%}}@-moz-keyframes rainbow{0%{background-position:0 82%}50%{background-position:100% 19%}100%{background-position:0 82%}}@-o-keyframes rainbow{0%{background-position:0 82%}50%{background-position:100% 19%}100%{background-position:0 82%}}@keyframes rainbow{0%{background-position:0 82%}50%{background-position:100% 19%}100%{background-position:0 82%}}h2{padding:1em 2em;margin:.25em}h5{padding:1em 2em;margin:.25em}.button-wrap{width:25%;display:flex;justify-content:space-around}</style>
</head>
<body>
   <!-- All items must be inside the container below. -->
   <div id="particles-js">
      <section class="seperator-wrapper">
         <div class="seperator gradient">
         </div>
      </section>
      <h2 class="animate__animated animate__fadeInLeft" style="font-family:monospace; font-weight: 500;font-style: normal; text-align:center; color:Black">arr3</h2>
      <h4 style="font-family:monospace; font weight: 500; font-style: normal; text-align:center; color:Black"> I love coding.</h4>
      <br>
      <button onclick="location.href = 'info.html'"
         style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; color:black" class="border-button">Want to learn more?</button>
      <br>
      <div class="button-wrap">
         <button onclick="location.href = 'mobydick.html'"
            style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; color:black" class="border-button">Read Moby Dick</button>
         <br>
         <button onclick="location.href = 'hmrkey.html'"
            style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; color:black" class="border-button">HammerHead Key</button>
      </div>
   </div>
</body>

How do I make my particles.js layer behind my buttons and text?

Related

Recent Posts