I have incorporated Particle JS into the banner using the link provided. It should be confined within the banner, with a white background underneath displaying the header text "hello there." However, the Particle.JS effect is currently taking over the entire page background. Does anyone know how to fix this?
https://codepen.io/mattrees92/pen/vYmKvNo
particlesJS("particles-js", {
// Particle configuration code here...
html,
body {
// CSS code for body and html...
}
header {
// CSS code for header...
}
#particles-js canvas {
// CSS code for particles-js canvas...
}
.container {
// Additional container styles...
}
h1 {
// CSS styling for h1 elements...
}
// More CSS styles for other elements...
<script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>
<header>
<div id="particles-js">
<div class="container">
<h1> Test Bed </h1>
<h2>Sub text to go here</h2>
<button class="btn-primary"> CONTACT US </button>
</div>
</div>
</header>
<div class="container">
<h1>Hello there</h1>
</div>