Блог

Я пытаюсь выровнять SVG, который поступает из tsparticles, с моим фоном внутри тега / atrib section data-background .

             <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>
 

Я очень близок, но просто не могу понять, как это сделать.

(Я разберусь с отзывчивостью позже)

На данный момент я бы дал руку, чтобы понять, что я делаю неправильно.

Я создал изображение и SVG из одного и того же файла, я проверил, что разрешение одинаковое, но SVG отказывается выравниваться, как я и ожидал.

             <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">amp;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 -->
 

И 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;
}
 

Это 1920 x 1080
Он пока не масштабируется в зависимости от размера экрана, я просто ищу надежный способ выровнять фоновое изображение, находящееся в теге раздела, с svg, поступающим из tsparticles app.js

Эта ссылка выглядит как проблема? вы можете увидеть его смещение от центра при предварительном просмотре здесь …

Я смог это исправить, удалив фоновое изображение данных из тега section и используя

 #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;
}
 

в CSS