title: Absolutely positioning background in responsive layout
body: <p>I am designing a responsive layout and have positioned a grungy png overlay on top of background using the following CSS:</p>
  
  <pre><code>#bg{
     background:url(images/top1.png) no-repeat; 
     position:absolute; 
     width:1423px; 
     height:350px; 
     top:0; 
     left:50%; 
     margin-left: -711px;
  }
  </code></pre>
  
  <p>This way, the image is always centered regardless of the page width. My problem occurs when the browser window is reduced to a width smaller than the background image for the <code>#bg</code> overlay. A horizontal scrollbar appears and the background extends far to the right (especially when the browser is very small). </p>
  
  <p>You can see a DEMO of this here: <a href="http://pixelcakecreative.com/cimlife/responsive2/" rel="nofollow">http://pixelcakecreative.com/cimlife/responsive2/</a></p>
  
  <p>As you can see a horizontal scrollbar appears, I would like browser window to shrink and not retain the full width of the image! Any ideas?</p>