Entierre de posicionamiento absolutamente en el diseño receptivo

Question

Estoy diseñando un diseño receptivo y he colocado una superposición PNG sucia sobre el fondo utilizando el siguiente CSS:

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

De esta manera, la imagen siempre se centra independientemente del ancho de la página. Mi problema ocurre cuando la ventana del navegador se reduce a un ancho más pequeño que la imagen de fondo para la #bg cubrir. Aparece una barra de desplazamiento horizontal y el fondo se extiende lejos hacia la derecha (especialmente cuando el navegador es muy pequeño).

Puedes ver una demostración de esto aquí: http://pixelcakecreative.com/cimlife/responsive2/

Como puede ver una barra de desplazamiento horizontal, me gustaría que la ventana del navegador se encogiera y no retenga el ancho completo de la imagen. ¿Algunas ideas?

Answer 1

Prueba este código CSS:

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

Answer 2

Solo eché un vistazo rápido a su código. Echa un vistazo a tu NAV, este produce la barra de desplazamiento.

Eche un vistazo a cómo habilitar las herramientas del desarrollador en su navegador para inspeccionar su página. Es una buena manera de verificar los atributos de sus elementos.

Aquí hay una buena introducción para Chrome: Enlace

Y para Safari: Enlace