CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
dsamardjiev
dsamardjiev

Reputation: 400

Overlay particles.js on fullscreen div

I am using the following .js plugin:

https://github.com/VincentGarreau/particles.js/

With bootstrap 3's jumbotron, I have got the plugin working and my jumbotron is fullscreen when you get to my homepage (I think this is the issue) I am trying to run particles.js UNDER my jumbotron but for some reason the particles generate a whole viewport underneath my jumbotron. Like it is set up in it's own DIV after my jumbotron unit but I have <div id="particles-js"></div> wrapped around my jumbotron DIV. Which is where I get lost, the way I have it set up it should display underneath my jumbotron content and everything.

Here is my HTML:

<div id="particles-js">
    <div class="jumbotron">
        <div class="container center-vertically">
            <div class="col-lg-6 col-lg-offset-3 text-center">
                <h1>
                    A template with a bit of a different <strong>look &amp; feel</strong>.
                </h1>
                <hr>
                <p>Particles is a fun and multipurpose template, with clean &amp; modern design <i>+</i>&nbsp; code.</p>
            </div>
        </div>
    </div>
</div>

And the CSS for the jumbotron as well as the particles-js ID:

.jumbotron { 
    height: 100%;
    width: 100%;
    font-family: 'Roboto', sans-serif;
    color: #fff;
    padding-top: 79px;
    padding-bottom: 0;
    display: table;
}

#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    background: #6819e8; /* Old browsers */
    background: -moz-linear-gradient(left, #6819e8 0%, #7437d0 35%, #615fde 68%, #6980f2 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #6819e8 0%,#7437d0 35%,#615fde 68%,#6980f2 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #6819e8 0%,#7437d0 35%,#615fde 68%,#6980f2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6819e8', endColorstr='#6980f2',GradientType=1 ); /* IE6-9 */ 
}

.center-vertically {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

I have also uploaded a live version so it is easier to view the problem:

http://aliensix.com/company/

Upvotes: 0

Views: 4714

Answers (1)

Prashant
Prashant

Reputation: 8040

I think what you need to do is make your #particles-js child of .jumbotron.

#particles-js needs to be positioned absolutely relative to the .jumbotron.

HTML

<div class="jumbotron">
    <div id="particles-js"></div>
</div>

CSS

.jumbotron {
    position: relative;
    // Other style rules ...
}

Upvotes: 1

Related Questions