ブラウザを狭めて横スクロールしたら背景が切れてしまうのを回避する

  • あとで読みたい人は…

@cappeeです。

ブラウザを狭めて横スクロールしたらbodyやdivの横幅100%で指定していた背景が切れてしまうことがあります。

この現状はPCのブラウザを狭めた時以外にも、スマホで見た場合にも同じ現状が発生しますので、忘れがちですが必ずサイト制作した場合は最終チェックしたいところですね。

通常はbodyにmin-widthを指定して、コンテンツ幅を記述すればOKです。

body{
 min-width:950px;
}

ですが、コーディングの記述によってはこれだけで効かない場合もありました。bodyに背景を指定して、それ以外の大枠のdivに100%指定をしていなかった時です。

そういう場合は、100%のdivをひとつ追加すると背景が切れるのを回避できます。

body {
 min-width:950px;
}
#wrapper {
width:100%;
 background: url("/images/bg.jpg") no-repeat 100% 0;
}
Pocket
article clipper ブラウザを狭めて横スクロールしたら背景が切れてしまうのを回避する

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)