title: Make splashscreen overlap elements
body: <p>i am trying to make my splash screen overlap the website.</p>
  <p>The splash screen gets pushed away by the elements that i want on the background.</p>
  <p>here is my HTML</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  </code></pre>
  
      
          
      
          
            window.OneSignal = window.OneSignal || [];
            OneSignal.push(function() {
              OneSignal.init({
                appId: "355bfb40-16e9-48aa-93c3-d9eb93775989",
              });
            });
          
      
          
          Rabbadz
          
          
  <pre><code>    &lt;link href=&quot;https://fonts.googleapis.com/css?family=Montserrat:300,400,600&amp;amp;subset=latin-ext&quot; rel=&quot;stylesheet&quot;&gt;
  
      &lt;!-- CSS --&gt;
      &lt;link href=&quot;assets/css/main.css&quot; rel=&quot;stylesheet&quot;&gt;
  
      &lt;!-- JS --&gt;
      &lt;script src=&quot;assets/js/vendor/modernizr-2.8.3.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;assets/js/vendor/jquery-1.12.0.min.js&quot;&gt;&lt;/script&gt;
  
      &lt;script src=&quot;assets/js/plugins/animate-headline.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;assets/js/main.js&quot;&gt;&lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
      
      &lt;audio id=&quot;myAudio&quot;&gt;
          &lt;source src=&quot;assets/sound.mp3&quot; type=&quot;audio/mpeg&quot;&gt;
      &lt;/audio&gt;
      
         &lt;!--logo--&gt;
      &lt;img src=&quot;assets/images/logo.png&quot; class=&quot;logo&quot;&gt;
  
                          &lt;!-- Options headline effects: .rotate | .slide | .zoom | .push | .clip --&gt;
                             &lt;div class=&quot;hero-section hero-section--color clearfix zoom&quot;&gt;
  
              &lt;!--we are rabbadz--&gt;
                                  &lt;div class=&quot;anitext&quot;&gt;
                                              &lt;div class=&quot;title-01 title-01--11 text-center&quot;&gt;
                                                  &lt;h2 class=&quot;title__heading&quot;&gt;
                                                      &lt;div class=&quot;hero-section__words text-center&quot;&gt;
                                                          &lt;div class=&quot;title__effect is-visible&quot;&gt;WE ARE RABBITS&lt;/div&gt;
                                                          &lt;div class=&quot;title__effect&quot;&gt;WE ARE BADASS&lt;/div&gt;
                                                          &lt;div class=&quot;title__effect&quot;&gt;WE ARE RABBADZ&lt;/div&gt;
                                                      &lt;/div&gt;
                                                  &lt;/h2&gt;
                                                  &lt;div class=&quot;title__description&quot;&gt;Coming soon to the metaverse.&lt;/div&gt;
              
                                                  &lt;!-- Options btn color: .btn-success | .btn-info | .btn-warning | .btn-danger | .btn-primary --&gt;
                                                  &lt;div class=&quot;title__action&quot;&gt;&lt;a href=&quot;https://mint.rabbadz.com&quot; class=&quot;btn btn-primary&quot;&gt;MINT&lt;/a&gt;&lt;/div&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
              
      
        &lt;!--Particles--&gt;
  
      &lt;div 
          id=&quot;particles-js&quot;&gt;&lt;/div&gt;
      
      &lt;script src=&quot;assets/js/particles.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;assets/js/app.js&quot;&gt;&lt;/script&gt; 
  
      &lt;!-- splashscreen--&gt;
      &lt;div class=&quot;scene content-hidden scene&quot;&gt;
          &lt;div class=&quot;scene&quot;&gt;
              &lt;div class=&quot;moon&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;script type=&quot;text/javascript&quot;&gt;
              function stars(){
                  let count = 500;
                  let scene = document.querySelector('.scene');
                  let i = 0;
                  while(i &lt; count){
                      let star = document.createElement(&quot;i&quot;);
                      let x = Math.floor(Math.random() * window.innerWidth);
                      let y = Math.floor(Math.random() * window.innerHeight);
  
                      let duration = Math.random() * 10;
                      let size = Math.random() * 2;
  
                      star.style.left = x+'px';
                      star.style.top = y+'px';
                      star.style.width = 1+size+'px';
                      star.style.height = 1+size+'px';
  
                      star.style.animationDuration = 5+duration+'s';
                      star.style.animationDelay = duration+'s';
                      scene.appendChild(star);
                     
                      i++
  
                  }
              }
              stars();
  
  
          &lt;/script&gt;
  
      &lt;!--Rabbadverse button--&gt;
  </code></pre>
  
      
              
              
                  $(function() {
                      
                      var scene = $('.scene'),
                          enterButton = scene.find('.knop');
                      
                      setTimeout(function() {
                          scene.removeClass('content-hidden');
                      }, 500);
                      
                      enterButton.on('click', function(e) {
                          e.preventDefault();
                          scene.addClass('content-hidden').fadeOut();
                      });
  <pre><code>                var anitext = $('.forest'),
                      enterButton = scene.find('.knop');
  
                      setTimeout(function() {
                      forest.removeClass('content-hidden');
                  }, 500);
  
                  enterButton.on('click', function(e) {
                      e.preventDefault();
                      forest.addClass('content-hidden').fadeOut();
                  });
                  
                  
              });
              
              
              
          &lt;/script&gt;
  </code></pre>
  
      var x = document.getElementById("myAudio"); 
  
      function playAudio() { 
      x.play(); 
      } 
  
      function pauseAudio() { 
      x.pause(); 
      } 
  
  
  <pre><code>&lt;/body&gt;
  </code></pre>