Particles.js as a background? [closed]

后端未结

关注

 8  1919

长发绾君心

相关标签:

8条回答

野的像风

2021-02-07 18:04

I've ran into this problem before and fixed it by doing this:

/* to show the canvas bounds and remove scrollbars caused by it, if applicable */
canvas {
    display:block;
    background: rgb(33,36,50);
    position: fixed;
    z-index: -1;
}

then create a div/main element for your content and add this to it:

mainElementNameHere {
    position: absolute;
}

0 讨论(0)

佛祖请我去吃肉

2021-02-07 18:08
You also can implement it like this
```
<body id="particles-js">
 <div class="something">
  <h1> something here </h1>
 </div>
</body>
```
in css
```
.something {
 z-index:1;
}
```
all the element of particle-js placed at the background. hope useful.
0 讨论(0)
发布评论:

提交评论
- 加载中...
盖世英雄少女心

2021-02-07 18:09

If your using particle js for wordpress website and following this link : http://cakewp.com/divi-tutorials/add-nice-moving-particles-background-effect/

Then, you may notice that the moving particle are above your content, in that case just give the content (it could be a column/row, or Button, or input field) a “z-index: 5(or more)”

In this picture, the search bar wasn't working. So, I gave

"z-index: 5"

to it. Now it works fine. Also, the particles are responding well.

0 讨论(0)
发布评论:

提交评论
- 加载中...
粉色の甜心

2021-02-07 18:10
In id="particles-js" just add this code to your css:
```
position: fixed !important;
display: block;
```
You can add !important to override the previous styles.
0 讨论(0)
发布评论:

提交评论
- 加载中...

野性不改

2021-02-07 18:16

Try to use the overflow: hidden; property at the element that you want to put in front of the particles.js;

#main-section {
    overflow: hidden;
}

#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    opacity: 0.48;
}

0 讨论(0)

予麋鹿

2021-02-07 18:16

I've been looking for the same. Now I'll be the first to say I probably didn't do something right following the instruction up here, but I found this and it works perfectly for me.

See this pen by Michael Van Den Berg

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

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

<body>

  <div id="particles-js"></div>
  <div> @*Content you want to be in front goes here*@ </div>

<body>

0 讨论(0)

1 2 下一页

热议问题