【CSS3】height:100vh で背景が切れてしまう問題について|長野県のホームページ制作ならファブデザイン｜FABB design 【CSS3】height:100vh で背景が切れてしまう問題について

こんにちは、デザイナーの野田沢です 。 ブラウザの高さに対する割合を指定することが可能な「vw、vh」。 とっても便利ですよね。 私も多用します。 私はよく height:100vh で背景に画像を敷いて使用することが多いのですが、スクロールで背景の画像が切れてしまうのです。もしかしたら、height:100vh に限ったことではないのかもしれませんが、今回はちょっとニッチなこの問題について解決したいと思います。 メインとなる背景のcssはこんな感じ。 main { position:relative; width:100vw; height:100vh; background: url(bg.jpg) 50% 50% no-repeat; background-size:cover; } もちろん最初はキレイに見えています。 しかし、ブラウザを小さくしてスクロールしてみると… 背景の画像