完全な背景画像がiPhone 5でうまくスケールされない

Question

私はいくつかのdivに背景画像を表示する1ページのウェブサイトを持っています。私はbackground-attachment: fixedを使って擬似視差スクロール効果を得ました。

デスクトップ上では完全に動作します。私は今これがiPhoneで動作しないことを知っているので、私はiPhoneのバージョンからメディアクエリを使用してこのコードを削除しました。 （私はフォールバックと一緒に暮らすことができます）。iPhone 5では、背景画像は認識できないビューにスケールアップされます。

携帯電話のブラウザウィンドウに合わせて画像のサイズを変更するにはどうすればよいですか？私はどこでも答えを探しました。

すべてのメディアクエリを削除しました。私はバックグラウンド・アタッチメントを削除しました。ここにサイトがある場所へのリンクがあります：http://www.mywebdesignstudio.net/danielleb_KKC（私はバックグラウンドの添付ファイルを返す：固定）iPhone 5で見ると、写真が大きすぎます。デスクトップ、ラップトップ、タブレットでは動作しますが、電話では動作しません。そのため、写真を交換して動作するかどうかを確認するメディアクエリです。コード全体のページソースを自由に見てください。

は、ここでCSSのコードです：

@viewport{ 
    zoom: 1.0; 
    width: device-width; 
} 

body, html { 
    height: 100%; 
    margin: 0; 
    font: 1em/1.8 "Arial", sans-serif; 
    color: #777; 
} 


.bgimg-1, .bgimg-2 { 
    position: relative; 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

.bgimg-1 { 
    background-image: url("pic4ghost.png"); 
    min-height: 100%; 
} 

.bgimg-2 { 
    background-image: url("radio.png"); 
    min-height: 550px; 
} 

@media only screen and (max-width: 767px){ 
    .bgimg-1 { 
     background-image: url("pic4ghostMOBILE.png"); 
     min-height: 100%; 
    } 


    .bgimg-2 { 
     background-image: url("radioMOBILE.png"); 
     min-height: 400px; 
    } 
} 

@media only screen and (min-device-width: 320px) and (max-device-width: 480px){ 

    .bgimg-1, .bgimg-2 { 
     background-size: cover; 
     background-position: center center; 
     background-repeat: no-repeat; 
    } 


    .bgimg-1 { 
     background-image: url("pic4ghostsmartphone.png"); 
    } 

    .bgimg-2 { 
     background-image: url("radiosmartphone.png"); 
    } 

Answer 1

使用このおよび他のすべてのコード

.bgimg-1 { 
background:url("pic4ghost.png") no-repeat center center fixed; 
background-size:cover; 
} 

は、他のすべてのクラスを削除して、メディアが

Answer 2

あなたはbackground-size:プロパティを使用してみましたクエリを削除しますか？

ここはコード例です。最初に宣言された背景が残りの部分の上に表示されます。

// Gradient, image and flat color as a fallback; 
.bgimg-1 { 

background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)), url("paper.gif"), black; 
background-size: auto, cover, auto; 
} 

CSS3を使用して、後方互換性のためにいくつかの必要性を持っている場合は、このサイトがどこにあるかに [caniuse.com]