携帯で画面を開くと背景画像が半分以下しか表示されない

Question

■実現したいこと
HTML、CSS、JavaScriptを使用してポートフォリオを作成しています。
模写コーディングを作成したのですがうまく動きません。

■要件
模写コーディングを作成。Gitにファイルをアップし自分の携帯端末iphone8で
画面を開くと背景画像が半分以下しか表示されない

ただし、
ＰＣのデベロッパーツールを使用してiphone6/7/8の設定に変更。
画面を開くと背景は正常に表示される。

携帯でも背景画像を正常に表示したいのですが何か考えられることはありますでしょうか？

    <section class="sec04" id="story">
        <div class="container">
            <ul>
                <li>
                    <h3>STORY</h3>
                    <p>科学的研究というのが近代史学の学問的方法によるちかごろ
                        世間で日本歴史の科学的研究ということがしきりに叫ばれている。
                        研究という意義であるならば、研究という意義であるならば
                        これは史学の学徒の間においては一般に行われていることであるから、
                        今さらこと新しくいうには及ばないはずである。
                    </p>
                </li>
                <li>
                    <h3>SUCCESS</h3>
                    <p>ちかごろ世間で日本歴史の科学的研究ということがしきりに
                        叫ばれているということがしきりに叫ばれている。
                        科学的研究というのが近代史学の学問的方法による研究という意義であるならば、
                        これは史学の学徒の間においては一般に行われていることであるから、
                        今さらこと新しくいうには及ばないはずである。
                    </p>
                </li>
            </ul>
        </div>
    </section>

.sec04{
    background: url(../img/reproduction06/bgSec04.jpg) no-repeat 100% 100% fixed;
}

.sec04 .container{
    width: 50%;
    padding: 0 auto;
}
.sec04 .container ul{
    display: flex;
    justify-content: space-between;
}
.sec04 .container li{
    width: 47%;
    list-style: none;
    padding-bottom: 144px;
}
.sec04 li h3 {
    padding-top: 100px;
    text-align: center;
    font-size: 22px;
 ![イメージ説明](eb59b29d87c4e8ad4491f889b27829d0.jpeg)t-weight: normal;
    padding-bottom: 28px;
}

Comments

[Lhankor_Mhy]

画像のサイズを教えてください。

[Rabitttt]

2556×1016です。

[Lhankor_Mhy]

横長の画像を携帯の縦長画面に一杯に表示したいということですね？
はみ出る部分は切り取っていいですか？

[Rabitttt]

はい、切り取って大丈夫です。

[Lhankor_Mhy]

iOSにはたしかバグがあって、
background-size: cover;
background-attachment: fixed;
を同時に適用すると上手くいかないのですが、これは仕方がないのでAndroidで見れるならいいや、と諦めてくれますか？

[Rabitttt]

えーーそうなんですね。。
はい、あきらめるしかないですね。
ありがとうございました。

Answer 1

もし、画像の縦横比は保たず、画像全体を要素全体に引き伸ばして表示したいのなら、

.sec04{
    background-image: url(../img/reproduction06/bgSec04.jpg);
    background-size: 100% 100%;
}

でよろしいかと。

Comments

[Rabitttt]

ありがとうございます。
iphoneでも正常に表示されまっした。
ちなみにfixedは使用できないのですよね？

[itagagaki]

すみません、background-attachment: fixed; がiOS？で使えないという知見については私はわからないです。実機で試してみてダメだったら、そういうことなのかもしれないですね。