ジェイクールの更新テクニック

幅100%に指定したヘッダやフッタの背景画像が切れる

幅を100%に指定した要素の背景に画像を使用すると、ブラウザの横スクロールをすると画像が切れてしまう現象がよくあります。
画像が切れるというよりは、スクロールを行わずに見る事の出来る可視部分には画像が表示され、不可視部分には元々表示されておらず、横スクロールでそれが分かってしまうという印象です。

こちらは予てより殆どのブラウザで起こる現象なので、バグというよりは仕様として捉える現象です。

bodyタグに以下スタイルを指定することで解消します。
min-width: ●●●px(コンテンツの全体幅);

絶対値指定に問題ある場合は、min-width: 100%; などが良いのではと。

横スクロールが出ない様な大きいモニターで確認をしていると、ついつい見落としてしまうポイントです。
タブレットデバイスやモバイルPCなど解像度の低いモニタでのチェックも重要です。