スマホやタブレットなどでサイトを見たとき、背景が切れて表示されている場合があります。
CSSを見ても特に間違った記述もないのになんで?となってしまうでしょう。
CSSを見ても特に間違った記述もないのになんで?となってしまうでしょう。
今回は背景が切れて表示されちゃった時の対処法をご紹介します。
そもそもなんで切れて表示される?
背景が横幅いっぱい表示されているときに起こるようです。
たとえばbodyの背景にしていたり、divタグでwidthを100%にしている場合です。
PCで普通に見た場合は横幅いっぱいに背景が表示されていますが、
ウィンドウを横スクロールが出るくらい小さくするとこうなります↓
ウィンドウの幅100%で表示するので、スクロールした部分の背景は切れてしまっています。
スマホの場合は、Viewportの影響でwidth指定がない部分がデフォルトの980pxと判断されてしまうので、
スクロールした部分が切れるというわけです。
この時のCSSは以下のとおりです。
CSS
body{ background:url(img/bg.jpg) top center repeat-x; padidng:0px; margin:0px; line-height:150%; font-size:90%; color:#666666; }
ここに1行追加するだけでOK。
body{ background:url(img/bg.jpg) top center repeat-x; padidng:0px; margin:0px; line-height:150%; font-size:90%; color:#666666; min-width:1000px; }
サイト上で使用している一番大きな幅のサイズを指定します。
切れていた背景が表示されるようになりました!
お手軽にできるので、ぜひお試しください♪