Lib doesn't display in the good div background

Hi Everyone ! :smile:

I’m currently working with particles.js (Short Documentation : https:// github. com/VincentGarreau/particles.js/), on a one page template with consequently a few different section. So I’m trying to implement this js library in my website.


I know I use the lib correctly because it works well on my first div, on my first website page. (cf website screenshot: https:// www. noelshack .com/2019-07-3-1550019179-first-div-first-page-no-problem.png (Yes, it’s very light but you can see it haha) and the code :

<div id="particles-js" class="g-fullheight--xs g-bg-position--center swiper-slide" style="background: url('img/1920x1080/couleur-ciel.jpg');">
                    <div class="container g-text-center--xs g-ver-center--xs">
                            <p style="font-size: calc(1em + 2vw);"><font color="white"><span class="typed"></span></font></p><br><br><br>
			                <a href="" class="animated infinite pulse text-uppercase s-btn s-btn--md s-btn--white-brd g-radius--10"><i class="far fa-file-pdf"></i></i>&nbsp&nbsp&nbspOur Guide  -  PDF&nbsp&nbsp&nbsp<i class="fas fa-download"></i></a>
           	 <a href="#js__scroll-to-section" class="s-scroll-to-section-v1--bc g-margin-b-15--xs">
             	 	<span class="g-font-size-18--xs g-color--white ti-angle-double-down"></span>
              	 	<p class="text-uppercase g-color--white g-letter-spacing--3 g-margin-b-0--xs">Learn More</p>

It definitely works well. So, the problem is coming now.

When I try to do the same thing on an other div later in the code (on the background that a submission form) cf code bellow. Here what happened : https:// www. noelshack. com/2019-07-3-1550020679-div-problem-website1.png, the module particle.js is at the bottom of my website onepage, cf screenshot : https:// www .noelshack. com/2019-07-3-1550020758-div-problem-website2.png.

<div id="particles-js1" style="background: url(img/1920x1080/couleur-ciel.jpg) 50% 0 no-repeat fixed;">
            <div class="g-container--sm g-text-center--xs g-padding-y-80--xs g-padding-y-125--sm">
                <div class="g-margin-b-80--xs">
                    <p class="text-uppercase g-font-size-14--xs g-font-weight--700 g-color--white-opacity g-letter-spacing--2 g-margin-b-25--xs">Subscribe</p>
                    <h2 class="g-font-size-32--xs g-font-size-36--md g-color--white">Join Over Thousands People</h2>

                   <div class="simple-subscription-form">
<section class="widget widget_blog_subscription">
	<form action="#" method="post" accept-charset="utf-8" id="subscribe-blog">
		<p><b>Subscribe to our newsletter</b></p>
			<input type="text" name="email" style="width: 95%; padding: 1px 2px" placeholder="Your email address" value="" id="subscribe-field">
			<input type="submit" value="SUBSCRIBE">

It should be print in the background of the wanted div, as my first div (cf first screenshot), not at the bottom :thinking:

(Btw, yes the id name “particles-js1” is different than the first name id “particles-js” in the first screenshot, only because by deduction of my previous problems in this code, I think you can’t call 2 times the same script “particle-js” in the same document) Anyway, that’s not the point.

If someone can help me to fix this issue and help me understand why the lib particle.js is loaded at the bottom and not in the correct div background, I’ll be very grateful.

Thank you in advance guys !