Absolutely positioning background in responsive layout

Question

I am designing a responsive layout and have positioned a grungy png overlay on top of background using the following CSS:

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

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 #bg overlay. A horizontal scrollbar appears and the background extends far to the right (especially when the browser is very small).

You can see a DEMO of this here: http://pixelcakecreative.com/cimlife/responsive2/

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?

Answer 1

try this css code:

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

Answer 2

Just had a quick look at your code. Check out your nav, this one produces the scrollbar.

Have a look on how to enable developer tools in your browser to inspect your page. It's a good way to check on your elements attributes.

Here's an good introduction for Chrome: Link

And for Safari: Link