レスポンシブレイアウトの背景を絶対に配置します

Question

レスポンシブレイアウトを設計しており、次のCSSを使用して、背景の上に汚れたPNGオーバーレイを配置しています。

#bg{
   background:url(images/top1.png) no-repeat; 
   position:absolute; 
   width:1423px; 
   height:350px; 
   top:0; 
   left:50%; 
   margin-left: -711px;
}

このようにして、画像はページ幅に関係なく常に中央に配置されます。私の問題は、ブラウザウィンドウが背景画像よりも小さい幅に縮小されたときに発生します。 #bg かぶせる。水平スクロールバーが表示され、背景が右に伸びています（特にブラウザが非常に小さい場合）。

ここでこれのデモを見ることができます： http://pixelcakecreative.com/cimlife/responsive2/

水平方向のスクロールバーが表示されるように、ブラウザウィンドウを収縮させ、画像の全幅を保持しないようにしたいです！何か案は？

Answer 1

このCSSコードを試してください：

      #bg{
 background:url(images/top1.png) no-repeat center;
 position:absolute;
 width:100%;
 height:350px;
 top:0px;
 left:0px;
 }

Answer 2

コードを簡単に見てみました。 NAVをチェックしてください、これはScrollbarを生成します。

ブラウザ内の開発者ツールを有効にしてページを検査する方法をご覧ください。要素の属性を確認するのに良い方法です。

これがChromeの良い紹介です： リンク

そしてサファリのために： リンク