2016-10-10 16 views
1

CSSの背景画像を使用しているウェブサイトのセクションがあります。ウェブサイトはhereです。固定された背景画像がどこにあるかは、「連絡先」セクションで確認できます。ここでは、画像の現在のCSSは次のとおりです。興味深いことに携帯電話のブラウザで拡大表示されたCSSの背景画像

#hs-contact-section { 
    color: #FFF; 
    background-image: url(../images/Chapel-interior.jpg); 
    background-size: cover; 
    background-attachment: fixed; 
    overflow: hidden; 
} 

、私は携帯サイズのウィンドウをシミュレートするために、ブラウザの検査ツールを使用している場合、画像が正しくズームされます。

しかし、私は実際のモバイルデバイス上のWebページにアクセスした場合、それは次のようになります。

mobile screenshot

は私のCSSに何か問題はありますか?私はオンラインで検索しようとしましたが、うまくいきませんでした。

+0

おそらくあなたのコンテンツ:#hs-contact-section resized ...オーバーフロースタイルを削除してもう一度チェックしてください –

+0

あなたはどのデバイスをテストしていますか? –

+0

私はiPhone 6でテスト中です。 – rsteilberg

答えて

0

「モバイルデバイスでは必ずしも機能しない」視差効果を使用している可能性があります。

は、W3Schoolsの上のノートに http://www.w3schools.com/howto/howto_css_parallax.asp

編集を参照してください:あなたは私たちの画像を入れ替えるか、あなたのCSSでルールを作成することができる効果を無効にしたい場合は

//768px is generally the max mobile pixel width 
 
@media screen and (max-width: 768px) { 
 
    #yourId { 
 
     element: attribute; 
 
    } 
 
}

関連する問題