スマホやタブレットなどでサイトを見たとき、背景が切れて表示されている場合があります。
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;
}
ここに１行追加するだけでＯＫ。
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;
}
サイト上で使用している一番大きな幅のサイズを指定します。
切れていた背景が表示されるようになりました！
お手軽にできるので、ぜひお試しください♪
スマホとかでサイトを見ると背景が切れる時の対処法
1980年6月生まれ。
秋田県在住。
地元のIT関連会社や市の機関でweb制作に携わり、2011年1月にフリーランスに。現在は子育てしながら日々業務にあたっています。
