Particles.jsの背景を固定 or repeatしたい

Particles.jsの背景をスクロールしても表示するために、
固定 or repeatしたいと思っています。

・コードペン
https://codepen.io/d0406234/pen/QWgpJPN

下記のコードを追加してみても、うまくいきませんでした。

css
1  background-repeat: repeat;
2  background-attachment: fixed;

html
1<p>
2  あ<br>
3  あ<br>
4  あ<br>
5  あ<br>
6  あ<br>
7  あ<br>
8  あ<br>
9  あ<br>
10  あ<br>
11  あ<br>
12  あ<br>
13  あ<br>
14  あ<br>
15  あ<br>
16  あ<br>
17  あ<br>
18  あ<br>
19  あ<br>
20  あ<br>
21  あ<br>
22  あ<br>
23  あ<br>
24  あ<br>
25  あ<br>
26  あ<br>
27  あ<br>
28  あ<br>
29  あ<br>
30  あ<br>
31  あ<br>
32  あ<br>
33  あ<br>
34  あ<br>
35  あ<br>
36  あ<br>
37  あ<br>
38  あ<br>
39  あ<br>
40  あ<br>
41  あ<br>
42  あ<br>
43  あ<br>
44  あ<br>
45  あ<br>
46  あ<br>
47  あ<br>
48  あ<br>
49  あ<br>
50  あ<br>
51  あ<br>
52  あ<br>
53  あ<br>
54  あ<br>
55  あ<br>
56  あ<br>
57  あ<br>
58  あ<br>
59  あ<br>
60  あ<br>
61  あ<br>
62  あ<br>
63  あ<br>
64  あ<br>
65  あ<br>
66  あ<br>
67  あ<br>
68  あ<br>
69  あ<br>
70  あ<br>
71  あ<br>
72  あ<br>
73  あ<br>
74  あ<br>
75  あ<br>
76  あ<br>
77  あ<br>
78  あ<br>
79  あ<br>
80  あ<br>
81  あ<br>
82  あ<br>
83  あ<br>
84  あ<br>
85  あ<br>
86  あ<br>
87  あ<br>
88</p>
89<canvas class="particles2"></canvas>
90<script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js"></script>

css
1.particles2 {
2  position: absolute;
3  display: block;
4  top: 0;
5  left: 0;
6  z-index: -10;
7/*   background-repeat: repeat;
8  background-attachment: fixed; */
9}

js
1window.onload= function() {
2  Particles.init({
3    selector: '.particles2',
4    sizeVariations: 5,
5    color: ['#00bbdd', '#404B69', '#DBEDF3'],
6    connectParticles: true
7  });
8};
9
10

他の方法があれば、アドバイスいただけますと幸いです。

行動規範の内容に同意します

回答1件

CSS
1.particles2 {
2    position: fixed;
3}

投稿2021/09/10 05:22

kei344

総合スコア69606

d04062

2021/09/10 05:33

ありがとうございます。この場合、Particlesに動きがなくなり、画像と同じようなものになってしまいます。 (コードペンでも試せます)

kei344

2021/09/10 05:37

> 背景を固定 or repeatしたいの固定です。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Particles.jsの背景を固定 or repeatしたい

関連した質問