0

i am using particles.js as the background for my page.i have created a button and while using margin property with the button class, my particles stops flowing in the entire page.

i have recently learn about particles.js and have no idea about it.

I have tried the solution available on this link but its not working for me.

particles.js not covering entire page

any help would be appreciated.

 <style>
        body
        {
            padding: 0;
            margin: 0;
 background: linear-gradient(to top right, #112128,#274a5a, #203A43, #0F2027,#081014);   

        }
        #particles-js
        {
            widows: 100%;
            height: 100%;
        }
        .butt
        {
            margin-top: 300px;
            margin-left: 300px;
        }
</style>


<body>
    <section id="particles-js">
        <button class="butt">click here</button>

    </section>
</body>
arunoday singh
  • 222
  • 2
  • 13

1 Answers1

0

Firstly, you've got a typo in your CSS: it's width not widows.

It could be that your <body> tag is to blame, because it's only expanding to fit your small content and not the entire window. So even though #particles-js has width:100% and height:100%, it's only expanding to fit the size of your <body> and not the screen.

Try https://stackoverflow.com/a/5722111/310779 to expand the body to the size of the screen.

If that doesnt work, then I'd try something like this:

#particles-js
{
   position: fixed;
   z-index: -1;
   left: 0;
   top: 0;
   width:100%;
   height: 100%;
}
Mikepote
  • 6,042
  • 3
  • 34
  • 38
  • nope its not working.Without button its working fine but when i am aligning the button using margin the particles are not filling the entire page. – arunoday singh Feb 04 '19 at 18:12