パララックス使用時の背景画像に余白ができる

Question

初めて質問させていただきます。

https://the-zombis.sakura.ne.jp/wp/blog/2019/08/03/post-3875/
こちらのサイトで紹介されているパララックスを使用して、ページ作成をしようと思っているのですが、

http://the-zombis.sakura.ne.jp/wp_plactice_file/pallarax/pallarax_move.html
こちらのデモページを画面幅いっぱいに表示すると、スクロール時背景画像(3枚目)の下部に余白ができてしまいます。

これは仕方のないことなのでしょうか？
改善できるようであればご教授お願い致します。

Comments

[Lhankor_Mhy]

『スクロール時背景画像(3枚目)の下部に余白ができてしまいます』とのことですが、この「余白」とは「ここはコンテンツ3」のことですか？

Answer 1

幅広の大きい画面で見るとそうなるみたいですね
画像3にもう少し縦長の画像を用意するか、

.parallax {
    padding-top: 66.66%;
}

の部分を少しずつ小さく調整していくと直ると思います。

Comments

[Z1T0]

ご回答ありがとうございます！

早速上記の個所を50％にして試してみたところ、
画面横幅いっぱに表示したときの余白は無くなりました！

ですが、画面横幅50％ぐらいで表示してみると余白が復活しました。
どの幅でも完全に余白を無くすというのは厳しいのでしょうか？

[Z1T0]

あれから試行錯誤しまして、なんとかなりそうですのでベストアンサーとさせていただきます！
ありがとうございました！