HTML
スマホとかでサイトを見ると背景が切れる時の対処法
スマホやタブレットなどでサイトを見たとき、背景が切れて表示されている場合があります。
CSSを見ても特に間違った記述もないのになんで?となってしまうでしょう。

今回は背景が切れて表示されちゃった時の対処法をご紹介します。

そもそもなんで切れて表示される?

背景が横幅いっぱい表示されているときに起こるようです。
たとえばbodyの背景にしていたり、divタグでwidthを100%にしている場合です。

PCで普通に見た場合は横幅いっぱいに背景が表示されていますが、
ウィンドウを横スクロールが出るくらい小さくするとこうなります↓

背景が切れてしまった時の対処法

ウィンドウの幅100%で表示するので、スクロールした部分の背景は切れてしまっています。
スマホの場合は、Viewportの影響でwidth指定がない部分がデフォルトの980pxと判断されてしまうので、
スクロールした部分が切れるというわけです。

この時のCSSは以下のとおりです。

CSS
[css]
body{
background:url(img/bg.jpg) top center repeat-x;
padidng:0px;
margin:0px;
line-height:150%;
font-size:90%;
color:#666666;
}
[/css]

ここに1行追加するだけでOK。

[css highlight=”8″]
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;
}
[/css]

サイト上で使用している一番大きな幅のサイズを指定します。

スマホとかでサイトを見ると背景が切れる時の対処法

切れていた背景が表示されるようになりました!
お手軽にできるので、ぜひお試しください♪

Contact
お問い合わせ
ホームページ制作に関するお問い合わせは、
こちらのメールフォームからお気軽にどうぞ。