positionnement tout à fait en arrière-plan mise en page réactif

Question

Je suis la conception d'une mise en page réactif et ont placé une superposition grungy .png sur le dessus de fond en utilisant le CSS suivant:

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

De cette façon, l'image est toujours centrée quelle que soit la largeur de la page. Mon problème se produit lorsque la fenêtre du navigateur est réduite à une largeur plus petite que l'image de fond pour le revêtement de #bg. Une barre de défilement horizontale apparaît et l'arrière-plan se prolonge vers la droite (en particulier lorsque le navigateur est très faible).

Vous pouvez voir une démonstration de ce ici: http://pixelcakecreative.com/cimlife/responsive2/

Comme vous pouvez le voir une affiche scrollbar horizontale, je voudrais fenêtre du navigateur pour rétrécir et ne pas conserver la largeur de l'image! Toutes les idées?

Answer 1

essayez ce code css:

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

Answer 2

Je viens juste un rapide coup d'oeil à votre code. Vérifiez votre navigation, celui-ci produit la barre de défilement.

Regardez comment activer les outils de développement dans votre navigateur pour inspecter votre page. Il est un bon moyen de vérifier vos attributs éléments.

Voici une bonne introduction pour Chrome: lien

Et pour Safari: Lien