background-imageの画像がスマホで表示できません。

Question

前提・実現したいこと

webサイト上でcssのbackground-imageで画像を挿入したいのですが、手持ちのiphone8で確認すると表示がされない状態になってしまいます。
PC画面の検証ツールでスマホサイズで確認すると問題なく表示されているのですがデバイスで確認すると表示が出来ません。
よろしく御願いします。

該当のソースコード

html

<div class="bg_img"></div>

css

.bg_img{
height:300px;
width:100%;
background-image:url(http://〇〇/〇〇.jpg);
background-size:contain;
background-attachment:fixed;
}

Answer 1

理由はわからないのですが、私用で外出しており二日振りに確認しましたら、画像が表示できるようになっていました。
ご回答して頂きました方々お忙しい中ご対応頂きありがとうございました。

Answer 2

疑似要素で表示してみるとかでしょうか。

.bg_img::before {
    background:url('http://sample.com/img.jpg') no-repeat left top;
    background-size: 100% auto;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: “”;
    z-index: -1;
}

Comments

[t_takahashi0302]

ありがとうございます。
上記の方法は試してみたのですが自分の場合上手く行きませんでした。

Answer 3

background-attachment:fixedがSafariとIEではうまく表示できない(表示はできるが、表示がおかしくなる)らしいです(まだ未解決)

解決方法はいろいろあるらしく、
** ・模擬要素を使って固定させる**=CSS上で解決できる
** ・jQuery(JavaScript)で固定させる**=CSSの記述がややこしくならない
などの方法があるらしいです。この記事がわかりやすいです

備考

・質問には表示されていないと書かれていますが、背景画像自体は表示されるはず(固定されない、サイズがおかしくなる)なのですが...別の問題の可能性の方が高いですね....