CODEWITHSUNDEEP
jqueryhtmlcss
Akshay
Akshay

Reputation: 2229

Make particleground as background for a page

Ok, so I'm going to use particleground(https://github.com/jnicol/particleground) as a background for a page.

I've added the particle ground, however, it appears above of all the content of the page. Somewhat like this :- enter image description here

What can I do to have this as background? Here's a part of the code.

<body>

    <?php include 'nav.php'; ?>

    <div class="container-fluid">
        <div id="particle">
                    <div class="row">
                            <div class="col-md-3 col-sm-12 col-xs-12">
                                <img src="images/logo.png">
                            </div>
                            <div class="col-md-6 col-sm-12 col-xs-12">
                            <div class="college_name">
                                IEC  College of Engineering and Technology
                                <br>
                                presents
                            </div>
                            </div>
                        </div>
                        <br>
                        <br>
                    <div class="row">
    ........

Upvotes: 0

Views: 825

Answers (3)

The Stone Age Developer
The Stone Age Developer

Reputation: 1

you should add the opening tags and closing tags of the particle div like this: 

<?php include 'nav.php'; ?>

<div class="container-fluid">
    <div id="particle"></div>
                <div class="row">
                        <div class="col-md-3 col-sm-12 col-xs-12">
                            <img src="images/logo.png">
                        </div>
                        <div class="col-md-6 col-sm-12 col-xs-12">
                        <div class="college_name">
                            IEC  College of Engineering and Technology
                            <br>
                            presents
                        </div>
                        </div>
                    </div>
                    <br>
                    <br>
                <div class="row">
........

Upvotes: 0

Kahoot
Kahoot

Reputation: 11

To fix this problem, I wrote the particle id after my content. For example if I had this:

<div class="title">
 <p>Title</p>
</div>
<!-- Calling the particle after the content, so it will be behind the content. 
-->
<div id="particles"></div>

Also make sure in CSS, you put an id #particles and declare at to be 100% in width and height. For example: 

#particles {
  width: 100%
  height: 100%
  position: fixed;


}

Upvotes: 1

Duncan Tidd
Duncan Tidd

Reputation: 1210

You can give your div#particle a fixed position with a 100% width and height. And before your nav include:

CSS

#particle {
    position: fixed;
    height: 100%;
    width: 100%;
}

HTML

 <body>
    <div id="particle"></div>

    <?php include('nav.php'); ?>

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3">
                ...
            </div>
            <div class="col-md-9">
                ...
            </div>
        </div>
    </div>
</body>

JS

$(function() {
    $('#particle').particleground({
            dotColor: 'rgba(255,255,255,0.1)',
            lineColor:'rgba(255,255,255,0.1)',
            particleRadius: 10,
            density: 5000,
            directionX: 'right',
            directionY: 'down'
    });
})

Now, Your .nav and .container-fluid will sit over the top of your particle ground.

Upvotes: 0

Related Questions