モバイルバックグラウンド画像拡大

Question

私はこの行に沿っていくつかのクエリを見つけました。それらは解決策を持たなかったか、解決策が私のために機能しませんでした。メディアクエリが設定されています。最小値は最大幅（700ピクセル）です。ブラウザをiPhoneの幅に設定してデスクトップでサイトをプレビューすると、プレビューがうまくいきます。しかし、実際のiPhoneでプレビューすると、写真のごく一部しか表示されません。 （SafariとChromeの両方で）私はテストする必要がないため、Android搭載端末についてはわかりません。

編集：ここではCSSのですhttp://www.dragonflyav.com

で全サイト：

@media (max-width: 700px) { 
 
    .intro { 
 
     background-image: url("images/backgrounds/fleet-top-770.jpg"); 
 
     background-size: cover; 
 
     -webkit-background-size: cover; 
 
     -moz-background-size: cover; 
 
     -o-background-size: cover; 
 
     background-position: center top; 
 
     background-repeat: no-repeat; 
 
     background-attachment: fixed; 
 
     height: 75vh; 
 
    }

私は、単純な何かが欠けてると確信している、私はいくつかのバリエーションを試してみました個々の物件を個別に捨てて、運がないようにします。次のように私のHTMLのmetaタグは以下のとおりです。

 <meta name="viewport" content="width=device-width" content="initial-scale-1">

Answer 1

あなたは間違ったスタイリングをoverrullingています。デスクトップスタイリングでは、あなたが使用している：

background: url(images/backgrounds/fleet-top-2400.jpg) no-repeat center center fixed; 

と応答に使用している：

background-image: url("images/backgrounds/fleet-top-770.jpg"); 

を使用すると、対応する画像の上にデスクトップの画像を見ることになるだろう。この道を。 1つのバックグラウンドプロパティを使用するだけで解決します。だから私は個人的に固執するでしょう：

background-image: url(images/backgrounds/fleet-top-2400.jpg) no-repeat center center fixed;