ブラウザの幅を小さくして横スクロールがでると背景画像が切れる問題を解決する1行

  • あとで読みたい人は…

@cappeeです。

以外と忘れやすいけど、指摘が多いブラウザの幅を小さくして横スクロールがでると背景画像が切れる問題。

最終チェックの際には必ず確認しておきたいポイントですね。

解決策はとっても簡単です。

サンプルコード

bodyに全体のコンテンツ幅と同じサイズを min-width で指定するだけ。

body{
        min-width:950px;
}

width:100%を記述したクラスに同じく min-width を指定するのでも大丈夫です。数が増えると面倒なのでbodyに1行だけ追加するのが楽ちんです。

最近多いコンテンツ枠からはみ出た部分にページトップへ戻るアイコンがある場合、CSSのポジションなんかで指定していて、それが min-width より外にでているとやっぱり切れてしまうのでご注意ください。

Pocket
article clipper ブラウザの幅を小さくして横スクロールがでると背景画像が切れる問題を解決する1行

コメントを残す

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

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