Particles Covering everything

px1w commented 3 years ago

When I run particles.js, it messes up everything in the webpage

This is it normally

And this is it when i run particles How do i fix this?

index.html

<!DOCTYPE html>
<html lang="en">
<style>
    .Title h1 {
        font-family: 'Product Sans Thin';
        font-size: 80px;
    }
    .Title h2 {
        font-family: 'Product Sans Thin';
        position: relative;
        bottom: 60px;
    }
    .DiscordDiv {
        font-family: 'Product Sans Thin';
    }
</style>
<head>
    <script src =jquery-3.6.0.js></script>
    <script src="particles.js"></script>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<div id="particle-div"></div>
<button id="particle-button">Start</button>

<script>
    $("#particle-button").click(function(){
        particlesJS.load('particle-div','particle-cfg.json');
    });
</script>

<div class ="DiscordDiv">
    <button class="Github">
        </button>
</div>
<div class="Background"></div>
<div class="Title">
    <h1>Shea</h1>
    <h2>Cool spaghetti person</h2>
</div>
</body>
</html>

madhav-madhusoodanan commented 3 years ago

How about you put the particle-button class at a negative z-index in the css?

ItsFlash10 commented 3 years ago

position: "absolute", top: 0, left: 0, width: "100%", height: "100%", zIndex: '100'

Add this to the div or css of particle.js

VincentGarreau / particles.js

Particles Covering everything #473