2016-10-09 15 views
0

背景画像はPCとシミュレータ(タブレットと携帯電話)で完全に表示されますが、実際の携帯電話/タブレットには表示されません。あなたはChromes simulatorに画像が表示され、この絵で見ることができるようにタブレットと携帯電話で背景画像が表示されない

コード

div#photo_break { 
    @include viewport-unit(height, 28vw); 
    background-image: url('<img>'); 
    background-repeat: no-repeat; 
    background-size: 100% auto; 
    -webkit-background-size: 100% auto; 
    -moz-background-size: 100% auto; 
    -o-background-size: 100% auto; 
    background-position: center top; 
    background-attachment: fixed; 
    z-index: 99999; 
} 

website

picture showing that in the Chrome simulator it works!

画像のサイズは本当に大きくない、またはそれを何ですか?

enter image description here

+0

どのような種類の携帯電話/タブレットですか?それがiOSなら、おそらくあなたの背景画像の寸法が問題です。 –

+0

@ペクカ笑私はiPad Air 2、iPhone 6s、Samsung S2 – Paul

答えて

0

mobiletablet browsersbackground-attachment: fixedをサポートしていません。

これを変更して、問題を解決しました。

0

ニースサイト。 :Dあなたの問題を解決しようとしましょう。

コンテンツをブロックする可能性があるため、メディアクエリ内にそのCSSコードが含まれていないことを確認してください。

モバイルの場合と同じCSSを使用して新しいメディアクエリを追加することもできます(この場合は@media (min-width: 481px) { }など)。

サイトを再度読み込む前に、モバイルブラウザのキャッシュを消去してください。

0

あなたの背景イメージの幅は12,000ピクセルです。読み込むには時間がかかりますが、ヘッダーの中に親divの背景を作って、それが当てはまる場合はそのコンテナ内の要素の背景として人物の画像を入れておくことをお勧めします。モバイルユーザーのデータを保存してください!

enter image description here

+0

に感謝しますが、提案していただきありがとうございます.2番目の画像が問題です。 'services'の後に' div#photo_break'があります。ヘッダーの写真は完全に実行されます – Paul

関連する問題