絶対に位置付け背景

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を調べてください。これはスクロールバーを生成します。

ブラウザでデベロッパーツールを有効にしてページを確認する方法をご覧ください。これは、あなたの要素の属性をチェックする良い方法です。

ここでChromeの良い入門だ：Link

とSafariのために： `100％、およびスクロールバーは小さくなるが、完全に除去されない：Link