PCだと表示される背景画像を、スマホでも表示させたい

Question

問題点

ポートフォリオを制作したので、確認のためサーバーにアップしたのですが、
スマホから閲覧すると背景画像だけが表示されていませんでした。

###症状
・画像の代わりに灰色の背景が表示されています
・PCでは正しく表示されており、背景画像以外の画像もPC・スマホ共に表示されています
・スマホのsafariとchromeで試しましたが、両者ともに正しく表示されていません

        <section class="section header-bg-img h-100vh content" id="home">
            <div class="header-table">
            </div>            
        </section>

.header-bg-img {
    position: relative;
    background-image: url(../images/slider1.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}

.header-bg-img:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    background-color: rgba(0,0,0,0.5);
}

試したこと

画像サイズの問題かと思い、スマホ用にサイズの小さな画像を載せてみましたが、
結果は変わりませんでした。

コードが悪いのか、そもそも着眼点が違うのか、
可能性として考えられる原因を教えていただきたいです。

解決にあたり足りない情報がございましたら、遠慮なくお伝えください。
どうぞよろしくお願いいたします。

Answer 1

高さを追記していただければ表示されます！
:beforeの箇所はpostionは必要ないかと思います

.header-bg-img {
  background-image: url(../images/slider1.jpg);
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  height: 100vh;
}

Comments

[退会済みユーザー]

TONGARI様
ご返信いただきましてありがとうございます。

ご提案いただいたコードを先ほど試してみたのですが、
うまくいきませんでした。

私の方でも原因を調査中ですので、
何か分かりましたらこちらに記載いたします。

どうぞよろしくお願いいたします。

[退会済みユーザー]

TONGARI様

原因が判明しました。

ihoneで閲覧する場合、下記の背景固定条件では
背景画像が正しく表示されないそうです。

background-attachment: fixed;
background-size: cover;
（参考にした記事：https://y-com.info/contents/?p=5941）

この度は私の勘違いで、問題の趣旨とは異なる質問をしてしまい
申し訳ありませんでした。

ご協力いただきまして、ありがとうございました。