Particles.js as a background for only a specific section

Question

I'm using Particles.js by Vincent Garreau (would link but can not share more than one link) to achieve a particle effect background on a specific section of my website.

<div id="particles-js" >

<section class="page-section features" >
<div class="container relative" >
     <div class=" font-alt hs-line-2 mb-30">
     <!-- Other relevant code for this section -->
     </div>
     </div> <!--end container div-->
     </section>
</div> <!-- End particles div>

The CSS

#particles-js {
  background-color: #000;
  position: absolute;
  z-index: 50;
  width: 100%;
  height: 100%;
  top: 0;
}

.page-section {
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 90px 0;
}

The class 'features' has no style rules.

However, this is the output of that code: https://i.stack.imgur.com/RAsJJ.jpg (image 1)

The particles div is under the features section. Not set as a background for that.

Setting a position: absolute or fixed for the particles div ruins the layout of the features section entirely, as the features section appears after a lot of other elements.

Setting a position of fixed on the particles div with a margin top and left right makes the features fixed permanently on the screen with me unable to scroll down past it.

Absolute screws up the positioning of the features section and particles.js is still not visible.

This is how it looks like when I set a position: absolute tag on the particles div : https://i.stack.imgur.com/RAsJJ.jpg (img2)

All I want is the particles to show up behind the features section, not separately below it.

Any assistance would be apreciated.

Maybe give features a transparent background and particles a black one? — Gerard, Jul 14 '17 at 10:49

score 0 · Answer 1 · answered Oct 27 '17 at 09:48

I had the same issue! What I did was basically setting particles.js as a fixed background:

view.html

<div id="particles-js" class="animation_background"></div>
<section>
...
...
</section>

styles.css.scss

.animation_background {
  background-color: #08090d;
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0; 
}

Then I had to set z-index for all the other elements higher than 0 so its on top of the background. This solution is not perfect because of performance reasons but it will give you your wished effect!

Particles.js as a background for only a specific section

1 Answers1