Assolutamente posizionando il background nel layout reattivo

Question

Sto progettando un layout reattivo e ho posizionato una sovrapposizione Gruggy PNG in cima allo sfondo usando i seguenti CSS:

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

In questo modo, l'immagine è sempre centrata indipendentemente dalla larghezza della pagina. Il mio problema si verifica quando la finestra del browser è ridotta a una larghezza inferiore all'immagine di sfondo per il #bg overlay. Viene visualizzata una barra di scorrimento orizzontale e lo sfondo si estende lontano a destra (specialmente quando il browser è molto piccolo).

Puoi vedere una demo di questo qui: http://pixelcakecreative.com/cimlife/responsive2/

Come puoi vedere una barra di scorrimento orizzontale, vorrei che la finestra del browser si riducesse e non mantenga l'intera larghezza dell'immagine! Qualche idea?

Answer 1

Prova questo codice CSS:

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

Answer 2

Dai un'occhiata rapida al tuo codice. Dai un'occhiata al tuo nav, questo produce la barra di scorrimento.

Dai un'occhiata a come abilitare gli strumenti per sviluppatori nel browser per ispezionare la tua pagina. È un buon modo per controllare gli attributi degli elementi.

Ecco una buona introduzione per Chrome: Collegamento

E per Safari: Collegamento