CSSで背景をブラウザ横100％で表示した時に横スクロールした時の背景を切れずに表示する方法

背景横100％で表示すると背景が切れる

背景色でも背景画像でもブラウザ横100％で表示する事は普通にあると思います。
背景の上にそのままコンテンツを展開する場合は問題ないのですが、
中に「width固定」を入れると、ブラウザの横スクロールが出るまで縮めてスクロールすると、
背景が切れている場合があります。
なぜでしょうねぇ。検証します。

背景を設置してみる

こんな感じで設置してみます。 橙色の部分が背景100％。 緑色の部分が固定（例で800px）です。 ソースは以下の様な感じです。

【HTML】

<div id="MAINBOX">
　<div class="innerbox"><p>固定エリア</p></div>
</div>

【CSS】

#MAINBOX{
　background-color: #ffc567;
}

.innerbox{
　background-color: #abdd30;
　width: 800px;
　margin: 0 auto;
}

ブラウザを縮めて、横スクロールをしてみると・・・

おや。。。？橙色の背景が切れる。。。なぜじゃ。。。
このままのCSSでは対応できなさそうですので、ちょっと足しましょう。

min-widthを追加する

背景が切れてしまう原因になっているのは「width固定」部分です。
この例の場合、widthが800pxの固定エリア以下になった場合に背景が切れてしまいます。
解決方法は、背景を設定しているCSSに最少幅を設定しましょう。
この例の場合はwidthが800pxなので、最小幅は800pxとなります。

【CSS】

#MAINBOX{
　background-color: #ffc567;
　min-width: 800px;
}

.innerbox{
　background-color: #abdd30;
　width: 800px;
　margin: 0 auto;
}

これで横スクロールをずらしても、背景は切れておらず100％表示になります。
普通だとちゃんと見えているので油断しちゃいますね。