画面いっぱいに背景画像を表示して雪を降らせる方法

ブラウザ幅に合わせて背景画像を表示して雪を降らせるページを作成したのですが、なかなかうまく表示されなかったのでメモしておきます。

ブラウザ幅に合わせて背景画像を表示する方法

cssでbodyタグに背景画像指定し、background-size: cover;を指定すれば、うまく表示されます。
ただこれだと、パソコン上では表示されますが、スマホだと画面いっぱいに表示されないんです。
スマホだと余白部分ができてしまうので、下記サイトを参考にしたらスマホでも画面いっぱいに表示されるようになりました。

PC/スマートフォンで背景画像を固定する

さらに背景画像で使う画像ですが、スマホから閲覧した時に大きい画像を表示すると重くなってしまうので、下記サイトを参考にして画面幅に合わせて表示する画像の切り替えもしました。

雪を降らせる方法

背景画像いっぱいにした状態で雪を降らせたからでしょうか？
いろいろなサイトを参考にしたのですが、なぜだか変な動きをすることが多くて困っていました。

下記サイトの方法で雪を降らせたらスマホでもタブレットでもパソコンでもうまく動きました。

webサイトに雪を降らせてくれるjquery snowfall.jsが素敵( ˘ω˘)

ちょっと雪の量を減らし、スピードを遅くしたかったので、設定を下記に変えました。

<!-- nowfall.jquery.js設定 -->
<script type="text/javascript">
  $(window).load(function(){
    $(document).snowfall({
    round:true,
    shadow:false,
    minSize:2,
    maxSize:12,
    flakeCount:55,
    minspeed:1,
    maxSpeed:3
    });
  });
</script>

実際にできたページが「DEMO」ボタンから確認できます。
皆さんブログなどで参考になるものをたくさん記載してくれているので、いつも助けられてます！！

DEMO