モバイルでの背景画像が正しく表示されない

Question

私のウェブサイトに問題があります。私のページはフランス語ですが、幸いにもすべての言語で同じです。私はページを見るためにサムスンのギャラクシーS5を使用しており、上に大きな黒いボックスがあります。

元のページhereを表示することができます。あなたのデスクトップ上でそれはすべての良いことがわかります。 今では私のギャラクシーS5（大きな画像申し訳ありませんが、どのようにスタックオーバーフローの大きさ、それをダウンに知らない）それは大丈夫だコンピュータやiPhone/iPadから任意のブラウザで

、上で何が起こるかです私のギャラクシーS5では、背景画像が下部に表示され、上部に黒いバーが表示されます。

今CSSの第一人者が私を助けることができる場合、私は、私が欠けているかわからないんだけど、デスクトップ/アプリ/ iPhoneのは

body{ 
    margin:0; 
    padding:0; 
    font-size:13px; 
    font-family:"Arial Black", Gadget, sans-serif; 
    color:#FFFFFF; 
    background-image: url('http://www.impotsuzannedelorme.com/images/cloud.jpg'); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
} 

あるに大丈夫動作します私は現在持っているコードは、私には理解されますたくさん。

ありがとうございます。

Answer 1

background-attachment:fixedはまだ携帯クロム（バージョン47）にをサポートされておらず、おそらく（それが適切にサポートされています）background-size:coverに干渉しています。 http://caniuse.com/#feat=background-attachmentをチェックしてください。

また、いくつかのIOS Safariのバージョンでは、これらの2つの機能（サイズカバー+アタッチメント固定）がアーティファクトを引き起こすことが知られています（http://caniuse.com/#search=background-size、タブの既知の問題を参照）。

• ：おそらくそれもiPadの2で動作しませんし、確かにそれはiPadのこれは言っ1.

  上では動作しません、あなたは固定された背景とスクロールコンテンツを持っているために、いくつかのオプションを持っていますbackground-attachment:fixedを削除してからスクロールdivアプローチを使用して、あなたは、現時点ではそれを持っているだけのようbackground-size:coverとbodyに画像を使用https://jsfiddle.net/6r3pobys/2/

• ：

  は背景のためのdivと、このようなコンテンツのスクロールのdivを使用します前のポイント：https://jsfiddle.net/s22qsg55/2/。この場合、height:100%をHTML要素に設定する必要があることに注意してください。

あなたのウェブページは、最新の方法でご覧になれます：https://jsfiddle.net/t9kpgjqr/2/。私はdivsupercontainerにあなたのボディーフラグメントとフッターが含まれているように作成しました。

Answer 2

background-repeat:no-repeat; 
background-size:auto; 

このコードを使用すると効果があります。

このawnserは恵み

Answer 3

のために正しいことを言ってください、あなたのナビゲーションバーの最大の高さを設定してみてくださいましたか？ナビゲーションバーにはナビゲーション以外何もありませんか？もしそうなら、それ以外のものがあればそれを押し下げるかもしれません。

一部のHTML/CSSコードが役立ちます。

Answer 4

試してみてください。

background-size: contain; 
background-position: center; 
background-repeat: no-repeat; 

クリーナー結果を提供します。 イメージの幅をパラメータとして受け取るWebサービスを使用し、要素のサイズが正しいイメージを返します。

Answer 5

使用できない場合CSS try JS まずINIT画像スタイル、

img{ background: fixed; margin: 0px; } 

とIMG = imgIdタグのIDを設定します。 さて、スクリプトでが

するvar ID =のdocument.getElementById（ "imgId"）、これを追加します。

id.style.height = screen.height;

id.style.width = screen.width;