Algernop K. Algernop K. - 6 months ago 115
HTML Question

Get particles.js on the correct layer?

I can't make particles.js work as a background. It covers the entire page, I've tried setting a higher z-index (50) for everything I want to cover particles.js with. Here's the particles codepen. The codepen has no background, therefor the particles are not visible.

The code below is what I'm trying to set as background for

<section id="services">
.

<!-- particles.js container -->
<div id="particles-js"></div>
<!-- stats - count particles -->
<!-- particles.js lib - https://github.com/VincentGarreau/particles.js -->
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<!-- stats.js lib --> <script src="http://threejs.org/examples/js/libs/stats.min.js"></script>


The problem is that it covers everything inside
<section>
as well, not sure why.

The code you're about to see is nothing but a butchered ole' bootstrap template. Never intended to make any real use of it in the first place, hence the confusing amount of style attributes.

<section id="services" style="padding:10px;background-color:black;">
<!-- Here's where I thought fitting it would cause it to work as a background -->
<div class="container" style="padding-top:10px;margin-top:10px;">
<div class="row text-center" style="margin-left:auto;margin-right:auto;">
<div style="margin-left:auto;margin-right:auto;max-width:720px;width:100%;">
<button id="reload" onclick="return returnGame();clearDescr();">
<div class="notspinning" id="theSpinner"></div>
</button>
<span id="findMe">
<a href="" id="steamLink" style="color:#333" target="_blank">
<h4 class="service-heading" id="gameName" style="font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif;text-transform:uppercase;font-weight: 700;font-size: 22px;color:#777;"></h4>
</a>
</span>
<p class="text-muted" id="gameDescr" style="min-height:100px;font-family:MyWebFont;"></p>
</div>
</div>
</div>
</section>


Any sort of guidance just in the right direction would be much appreciated.

Answer

have you tried setting an element as the background, e.g. position: fixed; top:0; right: 0; bottom: 0; left: 0; z-index: 0 and then another div for your content position: relative?

e.g. http://codepen.io/alexander-holman/pen/rebroK

In its simplest form your markup would look like:

<style>
    #particle {
      background-color: #b61924;
      position:fixed;
      top:0;
      right:0;
      bottom:0;
      left:0;
      z-index:0; 
    }
    #overlay {
      position:relative;
    }
</style>
<div id="particle"></div>
<div id="overylay">[Your content here]</div>
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
    var options = {};
    particlesJS("particle", options); 
</script>
Comments