javascript - How to add particle.js as a div background in bootstrap - Stack Overflow

admin管理员组

文章数量:1401133

please I would like to add a particle to a div section in bootstrap containing some text and typed.js text without my text disappearing, is this possible?

<div class="container text-center">
  <div id="particle-js">
    <h1 class="heading">
       TEXT
    </h1>
    <p>
      <span class="typing"></span>
    </p>
  </div>
</div>

please I would like to add a particle to a div section in bootstrap containing some text and typed.js text without my text disappearing, is this possible?

<div class="container text-center">
  <div id="particle-js">
    <h1 class="heading">
       TEXT
    </h1>
    <p>
      <span class="typing"></span>
    </p>
  </div>
</div>

• javascript
• twitter-bootstrap
• particles
• typed

Share Improve this question Follow edited Jul 6, 2018 at 10:42 Laurent asked Jul 6, 2018 at 10:34 LaurentLaurent 5111 silver badge55 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You can simply change the html layout so the particle-js div can be positioned as fixed or absolute and then give another div where your text would be placed on top of that.

<div class="container text-center">
  <div id="particles-js"></div>
  <div id="overlay">
    <h1 class="heading">
      TEXT
    </h1>
    <p>
      <span class="typing"></span>
    </p>
  </div>
</div>


#particles-js {
  background-color: #b61924;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}

#overlay {
  position: relative;
  padding: 50px;
}

Here is a very simple approach of that: https://jsfiddle/yrm4916s/

本文标签： javascriptHow to add particlejs as a div background in bootstrapStack Overflow