javascript - particles.js not covering entire page

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

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

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

Share Improve this question edited Jul 31, 2017 at 0:25 Priyantha 5,0836 gold badges30 silver badges46 bronze badges asked Jul 30, 2017 at 22:49 Nicola Zaltron 2251 gold badge2 silver badges12 bronze badges

Add a comment |

5 Answers 5

Sorted by: Reset to default 12

Ok I finally solved the background question: That's how I managed it (I'm pretty sure I had already tried that but re-building the whole html if finally worked)

CSS

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

.body-particles{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}

HTML

<html>
    <head>
        <title>Title</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <!-- SOME CSSs HERE -->

        <link rel="stylesheet" media="screen" href="assets/css/particles.css">

         <!-- SOME SCRIPTS HERE -->
    </head>
    <body>
        <div class="body-particles">

        <!-- Wrapper -->
            <div id="wrapper">
                <!-- MY STUFF HERE, STYLED WITH MY CSS -->
            </div>
        </div>

        <!-- particles.js container -->
        <div id="particles-js"></div>

        <!-- scripts -->
        <script src="assets/js/particles.js"></script>
        <script src="assets/js/app.js"></script>

    </body>
</html>

Now, I have a new problem: being set as an underlying layer, it catch no pointer-events. As soon as I will make it works, I'll update the answer.

Obviously, feel free to help if you have any suggestion.

UPDATE: Workaround for mouseEvents: Adding class mouseEvents to elements I need to focus (for example , navbar, etc.)

CSS

.body-particles{
  pointer-events: none;
}

.mouseEvents{
  pointer-events: all;
}

However, it would be nice if someone knows a better way to keep events both in front and back layer

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;
}

Assuming you're trying to mimic the example page, what I would do is this:

body: {
  padding: 0px;
  margin: 0px;
}

canvas{
  width: 100%;
  height: 100%;
}

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

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

.actual-content-container
{
   z-index: 100;
   /* whatever other style properties you want.  Apply this class to the div or other element you put your actual content in.*/
}

This is basically how the demo page is doing it. The key is the z-index property. If what you want is a background that scrolls with the actual content, try changing the position element of the particles-js id to absolute. I think that should get you in the ballpark.

- Set positions fixed for #particles-js container

#particles-js{
   position:fixed;
   width: 100%;
   height: 100%;
   background: linear-gradient(to right, rgb(52, 152, 219), rgb(44, 62, 80));
   background-repeat: repeat;
   background-size: cover;
}

- assigned class panel for the div having content in it.

.panel{
   position: absolute;
   margin-top: 5%;
   margin-bottom: 5%;
   margin-left: auto;
   margin-right: auto;
   left: 50;
   right: 50;
}

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;
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - particles.js not covering entire page - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)