particles.js not covering entire page

user_6739479 0
Viewed 12670

I'm trying to use particles.js as background, but I am not able to set the canvas as a full-size background.

I tried at least 10 different solution from similar issues but nothing worked. The canvas always results as as an element having width-height ratio as the screen but it doesn't cover it as a whole when it is resized. In addiction, it won't set as background but as a child of the body, over or below the remaining elements.

I simplified the code as much as possible and the problem still persist.

Example of the problem

HTML

<!DOCTYPE HTML>

<html>
    <head>
        <title>Try</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <link rel="stylesheet" media="screen" href="css/style.css">
    </head>

    <body>
        <div id="particles-js"></div>
        <div>
            <p>Something here</p>
        </div>
    </body>

    <script src="assets/js/particles.js"></script>
    <script src="assets/js/app.js"></script>
</html>

CSS

canvas{
  display:block;
  vertical-align:bottom;
  position: absolute;
}

/* ---- particles.js container ---- */

#particles-js{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #b61924;
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  top: 0;
}

APP.JS and PARTICLES.JS can be downloaded from the owner's website posted before. I'm using themas they are at the moment

Thanks for any help

particles.js particles css html javascript
5 Answers

I only had to do this...

HTML:

<body>
    <div id="particles-js"></div>
    ...
</body>

CSS:

#particles-js {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: -100;
}
user_58807780

Hi I'm probably too late here but this is how I solved having particles as a background was just a css fix

#particles {
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: red;
  z-index: -1;
}

canvas {
  position: fixed;
}

user_173614610
Related