2017-05-16 29 views
-1

私は現在、ブートストラップテンプレートを使用してウェブサイトを作成しており、http://apparelaid.usにあります。デスクトップ上で正常に動作しますが、モバイル上では背景画像(スクリーンショットが添付されている)は表示されません。コードはhttps://github.com/aalap07/ApparelAidにあります。画像がモバイル(iPhone)で正しく表示されるようにコードを修正するにはどうすればよいですか?Bootstrap.css - iPhoneで背景画像が表示されない

https://media.cheggcdn.com/media%2Fa99%2Fa99c5fe4-1490-4306-b9cc-98adc6ac75c4%2Fimage

答えて

1

は、具体的には、バナーの背景画像を変更style.cssファイル内の3つのmedia queriesがあります。これら3つのブレークポイント(メディアクエリ)は、480px(1253行目)、414px(1321行目)、および384px(1362行目)で発生します。この場合、イメージはイメージフォルダに存在しない別のイメージに変更されているため、空の白い背景として表示されます。

溶液: どちらこの

.banner { 
     background: url(../images/banner22.jpg) no-repeat -150px 0px; 
     background-size: cover; 
     min-height: 400px; 
    } 

画像をアップロードこの

.banner { 
     min-height: 400px; 
    } 

又は

なるように、両方のブレークポイントでクラス.bannerの背景プロパティを削除画像にモバイルデバイス上でサイトを表示したときに表示し、それに応じて背景URLを変更する場合はstyle.css

関連する問題