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

スマホやタブレットなどでサイトを見たとき、背景が切れて表示されている場合があります。
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;
}

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

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

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