#ffffff #bc7c43 #beb53f #85a248 #2f6850 #4f8ea4 #89bcc5 #565669 #000000 #b22222 #daa09a

web material *Essence

  1. Home
  2. DesignTips
  3. background-mobile

background image display

モバイル端末の背景固定

スクリーンショット

モバイル端末(Android・iOS)のbackground-attachment:fixed;が効かないので、div要素を背面に敷いてposition:fixed;する方法が紹介されていますが、サンプルを作って確認してみますと、Androidでは症状が出ないのにiPhoneでは(上下UI分の高さやpaddingを確保する方法をとってみても)スクロールし始めると固定された背景の下が表示されず止めると表示される、一度下まで表示が完了するとリロードしなければ表示されている(以降、リロードの度に下の画像が欠ける)状態になっていました。
(スクリーンショット及び下記リンク参照)
imgモバイル端末で状態を確認する これを修正する方法が無いかと色々検索しましたら、iOSでスクロール中に要素が消える問題が載っていましたので、合わせ技的にcssに追加記述してみました。
使い方の正誤は不明ですが、取り敢えず下が欠ける事は無くなりました。(詳しい方、問題が有りましたらお教え下さい。)
また、PCブラウザでも問題無く表示されておりますので、レスポンシブデザインサイトで背景を固定する場合に(モバイルで背景固定が普通にサポートされるまでは)有効な方法だと思います。

参考:スマホで背景fixedしたい時のCSSメモ
iOS9で動的にposition:fixedに切り替えるとスクロール中に要素が消える問題

モバイル端末の背景固定方法

body::before{
   background-image: url(画像ファイル名);
   background-repeat: repeat;
   position: fixed;
   display: block;
   top: 0;
   left: 0;
   width: 100%;
   height: 150%;
   content: "";
   z-index: -1;
   transform: translate3d(0, 0, 0);   
}

imgモバイル端末で確認する場合はここをclick

画面左上に画像

body::before{
   background-color: 背景色名;
   background-image: url(画像ファイル名);
   background-repeat: no-repeat;
   position: fixed;
   display: block;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   content: "";
   z-index: -1;
}

imgモバイル端末で確認する場合はここをclick

任意の位置に表示する場合は、background-position:横方向 縦方向;
を追記して下さい。詳しくは『背景画像の配置位置』のページをご参照下さい。