CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Tabish Imran
Tabish Imran

Reputation: 427

particle.js overlapping issue (canvas size)

Please don't vote as duplicate or invalid!

I am trying to use particle.js with a Bootstrap template for a project I'm working on. I kept the particle-js div right after the body tag and made a container inside the particle-js div which was a parent to the rest of my website's body. After the particles appeared at the bottom of the website, I tried everything I found at:

http://www.stackoverflow.com/questions/27679115/issue-with-putting-div-over-another-div

which is a similar problem. But that didn't work for me either, I tried every solution on SO and I've been stuck for two days now. Any help would be appreciated!

ayrus.org/test/ -> for those who want to see what the problem looks like!

Upvotes: 2

Views: 3537

Answers (1)

Tabish Imran
Tabish Imran

Reputation: 427

I managed to fix it , the canvas element that particle.js uses was inheriting the height and width from particle.min.js , i searched for 100% in that file and deleted the line which defined the values ! Then i used 

canvas {
  display: block;
  vertical-align: bottom;
  height: 80vh;
  width: 100vw;
  background-attachment:fixed;
}

to adjust the size according to what i needed ! Hope this helps someone else out!

Upvotes: 5

Related Questions