Need help aligning tsparticles.js .SVG polygonmask to a <section data-background=“image”>

Question

I'm trying to align a SVG thats coming in from tsparticles to my background inside a section data-background tag/atrib.

            <section class="home-section bg-dark-alfa-30 parallax-2" data-background="images/full-width-images/TEST.svg" id="home">
                <div id="tsparticles"></div>
                    <script src="js/tsparticles.js"></script>
                    <script src="js/app.js"></script>

I'm very close but just can't figure out the exact way to do it.

(I'll deal with responsiveness later)

For now I would give an arm to understand what I'm doing wrong.

I created the image and SVG from exactly the same file, I've checked the resolution is the same, but the SVG refuses to align as I would expect it too.

            <section class="home-section bg-dark-alfa-30 parallax-2" data-background="images/full-width-images/TEST.svg" id="home">
                <div id="tsparticles"></div>
                    <script src="js/tsparticles.js"></script>
                    <script src="js/app.js"></script>
                <div class="js-height-full container">
                    
                    <!-- Hero Content -->
                    <div class="home-content">

                        <div class="home-text"> 
                            <h1 class="hs-line-12 font-alt mb-50 mb-xs-30">
                                <img src="images/title-logo2.png" alt="Company logo" />
                                <!--Chris <p style="color:#000000">Theobald</p>-->
                            </h1>
                            
                            <h2 class="hs-line-8 no-transp font-alt mb-50 mb-xs-30">
                                More than <p style="color:#000000">technology</p>
                            </h2>
                            
                            
                            
                            <div class="local-scroll">
                                <a href="#about" class="btn btn-mod btn-border-w btn-medium btn-round hidden-xs">See More</a>
                                <!-- <span class="hidden-xs">&nbsp;</span>-->
                                
                            </div>                                  
                        </div>
                    </div>
                    <!-- End Hero Content -->
                    
                    <!-- Scroll Down -->
                    <div class="local-scroll">
                        <a href="#about" class="scroll-down"><i class="fa fa-angle-down scroll-down-icon"></i><span class="sr-only">Scroll to the next section</span></a>
                    </div>
                    <!-- End Scroll Down -->
                    </div>
            </section>
            <!-- End Home Section -->

And CSS

/* ==============================
   Home sections
   ============================== */
  
/*
 * Header common styles
 */

.home-section {
    width: 100%;
    display: block;    
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: -2;
}

.home-content{
    display: table;
    width: 100%;
    height: 100%;
    text-align: center;
}

/* Home content */

.home-content{
    position: relative;
}
.home-text{
    display: table-cell;
    height: 100%;
    vertical-align: middle;
}

#tsparticles{
  position: static;
}

This is at 1920 x 1080 It doesn't scale with screen size yet, I'm just looking for a sure fire way to align the background image sitting in the section tag with the svg coming in from tsparticles app.js

This link kinda looks like its the problem? you can see its off center in the preview here...

Answer 1

I was able to fix it by removing the data-background image from the section tag and using

#tsparticles {
  position: absolute;
  width: 100%;
  background-image: url("https://christheobald.com/images/full-width-images/TEST.svg"); --> this fixed it here.
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

in the CSS